prevented overflow in expression

frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css

@@ -1,4 +1,5 @@
 .code {
+  flex: 1;
   background-color: var(--fds-semantic-surface-neutral-subtle);
   border: 1px solid var(--fds-semantic-border-neutral-subtle);
   border-radius: var(--fds-border_radius-small);

frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx

@@ -8,6 +8,7 @@ export type StudioCodeFragmentProps = HTMLAttributes<HTMLElement>;
 const StudioCodeFragment = forwardRef<HTMLElement, StudioCodeFragmentProps>(
   ({ children, className: givenClass, ...rest }, ref) => {
     const className = cn(classes.code, givenClass);
+
     return (
       <code className={className} {...rest} ref={ref}>
         {children}

frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/LogicalExpressionEditor.module.css

@@ -1,7 +1,5 @@
 .fieldsetContent {
   align-items: stretch;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--studio-expression-spacing);
 }

frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css

@@ -5,3 +5,9 @@
   gap: var(--fds-spacing-1);
   justify-content: flex-start;
 }
+
+.codeFragment {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx

@@ -44,7 +44,11 @@ const DataModelLookupValue = ({
   return (
     <Binding
       name={texts.readonlyDataModelPath}
-      binding={<StudioCodeFragment>{value.path}</StudioCodeFragment>}
+      binding={
+        <StudioCodeFragment title={value.path} className={classes.codeFragment}>
+          {value.path}
+        </StudioCodeFragment>
+      }
     />
   );
 };

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css

@@ -9,6 +9,7 @@
   display: flex;
   align-items: center;
   color: var(--fds-semantic-text-neutral-default);
+  width: 100%;
 }
 
 .editIconWrapper {

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css

@@ -7,6 +7,13 @@
   padding: var(--fds-spacing-5);
 }
 
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 245px;
+}
+
 .duplicatedIdField {
   background-color: var(--fds-semantic-surface-danger-subtle) !important;
 }

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx

@@ -70,7 +70,11 @@ export const EditComponentIdRow = ({
         propertyPath='definitions/component/properties/id'
         key={component.id}
         viewProps={{
-          children: <Trans i18nKey={'ux_editor.id_identifier'} values={{ item: component.id }} />,
+          children: (
+            <span className={classes.ellipsis} title={component.id}>
+              <Trans i18nKey={'ux_editor.id_identifier'} values={{ item: component.id }} />
+            </span>
+          ),
           variant: 'tertiary',
           fullWidth: true,
         }}

frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css

@@ -18,6 +18,9 @@
 
 .legendContent {
   margin-left: var(--studio-expression-spacing);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .deleteButton {