fix(ui): keep home actions visible on short viewports (#452)

## Summary
- Make the folder selection home screen scroll vertically when short
viewports cannot fit the primary action column.
- Cap the recent folders/server list to the measured action column
height on desktop so it scrolls internally instead of stretching the
layout.
- Use a focused home layout stylesheet with equal-width desktop columns.

## Validation
- npm run typecheck --workspace @codenomad/ui
- npm run build --workspace @codenomad/ui

## Notes
- Build still emits existing warnings about virtua JSX import source and
large chunks; unrelated to this change.

Author: shantur

packages/ui/src/components/folder-selection-view.tsx

@@ -66,6 +66,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   const [serverDialogError, setServerDialogError] = createSignal<string | null>(null)
   const [isSavingServer, setIsSavingServer] = createSignal(false)
   const [connectingServerId, setConnectingServerId] = createSignal<string | null>(null)
+  let homeRootRef: HTMLDivElement | undefined
+  let actionsColumnRef: HTMLDivElement | undefined
   let recentListRef: HTMLDivElement | undefined
 
   type LanguageOption = { value: Locale; label: string }
@@ -242,6 +244,28 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     })
   })
 
+  onMount(() => {
+    const syncActionsHeight = () => {
+      if (!homeRootRef || !actionsColumnRef) return
+      const height = actionsColumnRef.getBoundingClientRect().height
+      homeRootRef.style.setProperty("--folder-home-actions-height", `${Math.ceil(height)}px`)
+    }
+
+    syncActionsHeight()
+    window.addEventListener("resize", syncActionsHeight)
+
+    let observer: ResizeObserver | undefined
+    if (typeof ResizeObserver !== "undefined" && actionsColumnRef) {
+      observer = new ResizeObserver(syncActionsHeight)
+      observer.observe(actionsColumnRef)
+    }
+
+    onCleanup(() => {
+      window.removeEventListener("resize", syncActionsHeight)
+      observer?.disconnect()
+    })
+  })
+
   function dropTargetBlocked() {
     return isLoading() || isFolderBrowserOpen() || settingsOpen()
   }
@@ -552,15 +576,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   return (
     <>
       <div
-        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 px-4 sm:px-6 relative"
-        style="background-color: var(--surface-secondary)"
+        class="folder-home-root flex w-full items-start justify-center py-6 px-4 sm:px-6 relative"
+        ref={(el) => (homeRootRef = el)}
         onDragEnter={folderDrop.bind.onDragEnter}
         onDragOver={folderDrop.bind.onDragOver}
         onDragLeave={folderDrop.bind.onDragLeave}
         onDrop={folderDrop.bind.onDrop}
       >
         <div
-          class="w-full max-w-5xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
+          class="folder-home-shell w-full max-w-5xl px-4 sm:px-8 pb-2 flex flex-col"
           aria-busy={isLoading() ? "true" : "false"}
         >
           <div class="absolute top-4" style="inset-inline-start: 1.5rem;">
@@ -640,9 +664,9 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               </button>
             </Show>
           </div>
-          <div class="mb-6 text-center shrink-0">
+          <div class="folder-home-hero text-center shrink-0">
             <div class="mb-3 flex justify-center">
-              <img src={codeNomadLogo} alt={t("folderSelection.logoAlt")} class="h-32 w-auto sm:h-48" loading="lazy" />
+              <img src={codeNomadLogo} alt={t("folderSelection.logoAlt")} class="folder-home-logo w-auto" loading="lazy" />
             </div>
             <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
             <div class="mt-3 flex justify-center gap-2">
@@ -694,11 +718,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
             </div>
           </div>
 
-          <div class="flex-1 min-h-0 overflow-hidden flex flex-col gap-4">
-            <div class="flex-1 min-h-0 overflow-hidden flex flex-col lg:flex-row gap-4">
+          <div class="folder-home-content flex-1 min-h-0 flex flex-col gap-4">
+            <div class="folder-home-main flex-1 gap-4">
               {/* Right column: recent folders */}
-              <div class="order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden">
-                <div class="panel flex flex-col flex-1 min-h-0">
+              <div class="folder-home-list-column order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0">
+                <div class="folder-home-list-panel panel flex flex-col flex-1">
                   <div class="panel-header !gap-0 !p-0">
                     <div class={`grid ${canUseRemoteServerWindows() ? "grid-cols-2" : "grid-cols-1"} gap-0 overflow-hidden border border-base rounded-t-lg rounded-b-none`}>
                       <button
@@ -930,7 +954,10 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               </div>
 
               {/* Left column: version + browse + advanced settings */}
-              <div class="order-2 lg:order-1 flex flex-col gap-4 flex-1 min-h-0">
+              <div
+                class="folder-home-actions-column order-2 lg:order-1 flex flex-col gap-4 flex-1"
+                ref={(el) => (actionsColumnRef = el)}
+              >
               <div class="panel shrink-0">
                 <div class="panel-header hidden sm:block">
                   <h2 class="panel-title">{t("folderSelection.actions.title")}</h2>

packages/ui/src/styles/components/folder-drop.css

@@ -1,5 +1,5 @@
 .folder-drop-overlay {
-  position: absolute;
+  position: fixed;
   inset: 0;
   z-index: 40;
   display: flex;

packages/ui/src/styles/components/folder-home.css

@@ -0,0 +1,73 @@
+.folder-home-root {
+  height: 100dvh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--surface-secondary);
+}
+
+.folder-home-shell {
+  min-height: 100%;
+}
+
+.folder-home-hero {
+  margin-bottom: 1.5rem;
+}
+
+.folder-home-logo {
+  height: 8rem;
+}
+
+.folder-home-content,
+.folder-home-main,
+.folder-home-list-column,
+.folder-home-actions-column {
+  overflow: visible;
+}
+
+.folder-home-main {
+  display: flex;
+  flex-direction: column;
+  min-height: max-content;
+}
+
+.folder-home-actions-column {
+  min-height: max-content;
+}
+
+.folder-home-list-panel {
+  min-height: 16rem;
+}
+
+@media (min-width: 1024px) {
+  .folder-home-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .folder-home-list-column,
+  .folder-home-actions-column {
+    min-width: 0;
+  }
+
+  .folder-home-list-panel {
+    height: var(--folder-home-actions-height, auto);
+    max-height: var(--folder-home-actions-height, none);
+  }
+}
+
+@media (min-width: 640px) and (min-height: 721px) {
+  .folder-home-logo {
+    height: 12rem;
+  }
+}
+
+@media (max-height: 720px) and (min-width: 1024px) {
+  .folder-home-hero {
+    margin-bottom: var(--space-md);
+  }
+
+  .folder-home-logo {
+    height: 8rem;
+  }
+}

packages/ui/src/styles/components/folder-loading.css

@@ -1,6 +1,6 @@
 /* Folder loading overlay */
 .folder-loading-overlay {
-  position: absolute;
+  position: fixed;
   inset: 0;
   background-color: var(--folder-overlay-bg);
   display: flex;

packages/ui/src/styles/controls.css

@@ -1,5 +1,6 @@
 @import "./components/buttons.css";
 @import "./components/badges.css";
+@import "./components/folder-home.css";
 @import "./components/folder-drop.css";
 @import "./components/folder-loading.css";
 @import "./components/dropdown.css";