Refine layout and styling across editor panels and modal components to improve UI consistency

- modal's form content should use 'simple bar'. Make it no higher than 80vh
- `apps/editor/src/views/shared/components/EditWebConfigurationForm/EditWebConfigurationForm.tsx` already uses 'scrollable' so modal should not use simplebar, but make it work (limit max height appropriately)
- the form content can't be scrolled
- the modal should stop growing once form's children height is reached. Make sure to not break scrolling once there is not enough space to fit it.
- should mount with 'options' collapsed when no option is selected

Author: robertpiosik

apps/editor/src/views/panel/frontend/Home/Home.module.scss

@@ -42,7 +42,6 @@
   justify-content: space-between;
   gap: 24px;
   height: 100%;
-  padding-top: 4px;
 
   &--sticky {
     margin-top: 44px;

apps/editor/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -327,8 +327,6 @@ export const MainView: React.FC<Props> = (props) => {
         is_setup_complete={props.is_setup_complete}
       />
       <UiScrollable scroll_to_top_key={props.scroll_reset_key}>
-        <UiSeparator height={4} />
-
         {is_in_find_relevant_files_prompt_type && (
           <div className={styles['shrink-source-code-checkbox']}>
             <UiCheckbox

apps/editor/src/views/shared/components/EditWebConfigurationForm/EditWebConfigurationForm.module.scss

@@ -1,8 +1,8 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 4px 12px 12px 12px;
+  gap: 16px;
+  padding: 0 12px 12px 12px;
 }
 
 .options {

apps/editor/src/views/shared/components/EditWebConfigurationForm/EditWebConfigurationForm.tsx

@@ -50,7 +50,7 @@ export const EditWebConfigurationForm: React.FC<Props> = (props) => {
     props.web_configuration.temperature === undefined && props.web_configuration.top_p === undefined
   )
   const [is_options_collapsed, set_is_options_collapsed] = useState(
-    !props.web_configuration.options?.length
+    (props.web_configuration.options || []).length == 0
   )
 
   const chatbot_config = chatbot ? CHATBOTS[chatbot] : undefined

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

@@ -1,11 +1,9 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--cwc-border-color-dimmed);
-  border-radius: 10px;
+  gap: 8px;
 
   &__label {
-    padding: 8px 10px 8px 10px;
     font-size: 11px;
     font-weight: 600;
     color: var(--cwc-text-color-dimmed);
@@ -27,6 +25,5 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 2px 10px 10px 10px;
   }
 }

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

@@ -12,7 +12,6 @@
   justify-content: space-between;
   margin: 6px 12px;
   position: relative;
-  height: 20px;
 
   &__title {
     position: absolute;

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

@@ -2,6 +2,7 @@
   overflow: hidden;
   flex: 1;
   position: relative;
+  height: 100%;
 
   &--shadow::before {
     content: '';

packages/ui/src/components/editor/panel/modals/Modal/Modal.module.scss

@@ -1,3 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 320px;
+  background-color: var(--vscode-sideBar-background);
+  border: 1px solid var(--cwc-border-color);
+
+  &--full-width {
+    max-width: none;
+  }
+}
+
 .overlay {
   position: absolute;
   top: 0;
@@ -94,20 +110,3 @@
     flex: 1;
   }
 }
-
-.container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 1;
-  border-radius: 12px;
-  width: 100%;
-  max-width: 320px;
-  color: var(--vscode-quickInput-foreground);
-  background-color: var(--vscode-quickInput-background);
-  border: 1px solid var(--cwc-border-color);
-
-  &--full-width {
-    max-width: none;
-  }
-}

packages/ui/src/components/editor/settings/Modal/Form/Form.module.scss

@@ -1,28 +1,25 @@
 .form {
   display: flex;
   flex-direction: column;
-  padding: 24px;
   background-color: var(--vscode-editor-background);
   color: var(--vscode-editor-foreground);
   border-radius: 8px;
-  min-width: 300px;
-  gap: 24px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 350px;
+  border: 1px solid var(--cwc-border-color);
 }
 
 .header {
   text-align: center;
   font-size: 16px;
   font-weight: 600;
   margin: 0;
-}
-
-.body {
-  flex: 1;
+  padding: 12px;
 }
 
 .footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
+  padding: 12px;
+  border-top: 1px solid var(--cwc-border-color-dimmed);
 }

packages/ui/src/components/editor/settings/Modal/Form/Form.tsx

@@ -10,11 +10,17 @@ export type FormProps = {
   save_label?: string
 }
 
-export const Form: React.FC<FormProps> = ({ title, children, on_save, on_cancel, save_label = 'Save' }) => {
+export const Form: React.FC<FormProps> = ({
+  title,
+  children,
+  on_save,
+  on_cancel,
+  save_label = 'Save'
+}) => {
   return (
     <div className={styles.form}>
       <div className={styles.header}>{title}</div>
-      <div className={styles.body}>{children}</div>
+      {children}
       <div className={styles.footer}>
         {on_cancel && (
           <Button is_secondary on_click={on_cancel}>