fix truncating spacing issue

opendatahub-io · Nov 14, 2023 · 56c29ed · 56c29ed
1 parent b13896b
commit 56c29ed
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 deletions.
diff --git a/frontend/src/components/SimpleDropdownSelect.scss b/frontend/src/components/SimpleDropdownSelect.scss
@@ -1,3 +1,8 @@
 .full-width {
 	width: 100%;
+}
+
+.truncate-no-min-width {
+	--pf-c-truncate--MinWidth: 0;
+    --pf-c-truncate__start--MinWidth: 0;
 }
diff --git a/frontend/src/components/SimpleDropdownSelect.tsx b/frontend/src/components/SimpleDropdownSelect.tsx
@@ -4,9 +4,9 @@ import './SimpleDropdownSelect.scss';
 
 export type SimpleDropdownOption = {
   key: string;
-  label: React.ReactNode;
+  label: string;
   description?: React.ReactNode;
-  selectedLabel?: React.ReactNode;
+  dropdownLabel?: React.ReactNode;
   isPlaceholder?: boolean;
 };
 
@@ -29,9 +29,8 @@ const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
   ...props
 }) => {
   const [open, setOpen] = React.useState(false);
-
   const selectedOption = options.find(({ key }) => key === value);
-  const selectedLabel = selectedOption?.selectedLabel ?? selectedOption?.label ?? placeholder;
+  const selectedLabel = selectedOption?.label ?? placeholder;
 
   return (
     <Dropdown
@@ -44,12 +43,12 @@ const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
           className={isFullWidth ? 'full-width' : undefined}
           onToggle={() => setOpen(!open)}
         >
-          <Truncate content={selectedLabel.toString()} style={{ paddingLeft: 0 }} />
+          <Truncate content={selectedLabel} className="truncate-no-min-width" />
         </DropdownToggle>
       }
-      dropdownItems={options
+      dropdownItems={[...options]
         .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1))
-        .map(({ key, label, description, isPlaceholder }) => (
+        .map(({ key, dropdownLabel, label, description, isPlaceholder }) => (
           <DropdownItem
             key={key}
             description={description}
@@ -58,7 +57,7 @@ const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
               setOpen(false);
             }}
           >
-            {label}
+            {dropdownLabel ?? label}
           </DropdownItem>
         ))}
     />

diff --git a/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx b/...pages/modelServing/screens/projects/ServingRuntimeModal/ServingRuntimeTemplateSection.tsx
@@ -36,8 +36,8 @@ const ServingRuntimeTemplateSection: React.FC<ServingRuntimeTemplateSectionProps
 }) => {
   const options = templates.map((template) => ({
     key: getServingRuntimeNameFromTemplate(template),
-    selectedLabel: getServingRuntimeDisplayNameFromTemplate(template),
-    label: (
+    label: getServingRuntimeDisplayNameFromTemplate(template),
+    dropdownLabel: (
       <Split>
         <SplitItem>
           {<Truncate content={getServingRuntimeDisplayNameFromTemplate(template)} />}

diff --git a/frontend/src/pages/notebookController/screens/server/AcceleratorSelectField.tsx b/frontend/src/pages/notebookController/screens/server/AcceleratorSelectField.tsx
@@ -75,9 +75,9 @@ const AcceleratorSelectField: React.FC<AcceleratorSelectFieldProps> = ({
 
     return {
       key: ac.metadata.name,
-      selectedLabel: displayName,
+      label: displayName,
       description: ac.spec.description,
-      label: (
+      dropdownLabel: (
         <Split>
           <SplitItem>{displayName}</SplitItem>
           <SplitItem isFilled />

diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx
@@ -32,10 +32,10 @@ const ImageStreamSelector: React.FC<ImageStreamSelectorProps> = ({
 
     return {
       key: imageStream.metadata.name,
-      selectedLabel: displayName,
+      label: displayName,
       description: description,
       disabled: !checkImageStreamAvailability(imageStream, buildStatuses),
-      label: (
+      dropdownLabel: (
         <Split>
           <SplitItem>{displayName}</SplitItem>
           <SplitItem isFilled />