Update UI text, layout, and overflow handling for settings and prompt field components

Author: robertpiosik

apps/editor/src/views/settings/backend/message-handlers/handle-upsert-model-provider.ts

@@ -403,7 +403,7 @@ export const handle_upsert_model_provider = async (params: {
       quick_pick.items = items
       quick_pick.title = 'Add New Model Provider'
       quick_pick.placeholder =
-        'Choose a predefined provider or create a custom one'
+        'Choose a predefined provider or add a custom endpoint'
 
       return new Promise((resolve) => {
         quick_pick.onDidAccept(() => {

packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss

@@ -291,6 +291,7 @@
 .footer {
   display: flex;
   padding: 6px 10px 6px 6px;
+  gap: 5px;
   justify-content: space-between;
   position: relative;
 

packages/ui/src/components/editor/panel/PromptField/hooks/use-edit-format-compacting.ts

@@ -17,15 +17,12 @@ export const use_edit_format_compacting = () => {
     ]
 
     if (refs.every((ref) => ref.current)) {
-      // Calculate total width of all elements
       const total_width = refs.reduce(
         (acc, ref) => acc + (ref.current?.getBoundingClientRect().width || 0),
         0
       )
-      // Add gap (4px * 3 gaps)
-      const width = total_width
 
-      report_width(width, compact_step)
+      report_width(total_width, compact_step)
     }
   }, [compact_step, report_width])
 

packages/ui/src/components/editor/settings/Section/Section.module.scss

@@ -53,6 +53,7 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
+    overflow: hidden;
   }
 
   &__group {
@@ -64,10 +65,16 @@
     margin: 0;
     font-size: 20px;
     font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__subtitle {
     color: var(--cwc-text-secondary);
     font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

packages/ui/src/components/editor/settings/Section/Section.tsx

@@ -92,7 +92,10 @@ export const Section = forwardRef<HTMLDivElement, Props>((props, ref) => {
       >
         <div className={styles.header__marker} ref={marker_ref} />
         <div className={styles.header__top}>
-          <div className={styles.header__content}>
+          <div
+            className={styles.header__content}
+            title={`${props.title}—${props.subtitle}`}
+          >
             <div className={styles.header__title}>
               {props.group && (
                 <span className={styles.header__group}>{props.group}: </span>