fix(app): alignment and padding in dialogs (#10866)

Author: alexyaroshuk

packages/app/src/components/dialog-select-file.tsx

@@ -196,7 +196,6 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
             : language.t("palette.search.placeholder"),
           autofocus: true,
           hideIcon: true,
-          class: "pl-3 pr-2 !mb-0",
         }}
         emptyMessage={language.t("palette.empty")}
         loadingMessage={language.t("common.loading")}
@@ -224,7 +223,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
               </div>
             }
           >
-            <div class="w-full flex items-center justify-between gap-4 pl-1">
+            <div class="w-full flex items-center justify-between gap-4">
               <div class="flex items-center gap-2 min-w-0">
                 <span class="text-14-regular text-text-strong whitespace-nowrap">{item.title}</span>
                 <Show when={item.description}>

packages/app/src/components/dialog-select-model.tsx

@@ -187,7 +187,7 @@ export function ModelSelectorPopover<T extends ValidComponent = "div">(props: {
       <Kobalte.Portal>
         <Kobalte.Content
           ref={(el) => setStore("content", el)}
-          class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
             setStore("dismiss", "escape")
             setStore("open", false)

packages/ui/src/components/dialog.tsx

@@ -60,7 +60,7 @@ export function Dialog(props: DialogProps) {
             </div>
           </Show>
           <Show when={props.description}>
-            <Kobalte.Description data-slot="dialog-description">{props.description}</Kobalte.Description>
+            <Kobalte.Description data-slot="dialog-description" style={{ "margin-left": "-4px" }}>{props.description}</Kobalte.Description>
           </Show>
           <div data-slot="dialog-body">{props.children}</div>
         </Kobalte.Content>

packages/ui/src/components/list.css

@@ -187,7 +187,7 @@
       [data-slot="list-header"] {
         display: flex;
         z-index: 10;
-        padding: 8px 12px 8px 12px;
+        padding: 8px 12px 8px 8px;
         justify-content: space-between;
         align-items: center;
         align-self: stretch;

packages/ui/src/components/list.tsx

@@ -264,8 +264,8 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
               />
             </Show>
           </div>
-          {searchAction()}
-        </div>
+            {searchAction()}
+          </div>
       </Show>
       <div ref={setScrollRef} data-slot="list-scroll">
         <Show