fix(ui): constrain mobile folder home layout

shantur · shantur · commit cabe89476f82 · 2026-05-17T20:24:38.000+01:00
Reserve space for the absolute homepage controls on narrow screens so the language selector no longer overlaps the CodeNomad logo.

Apply the existing actions-column height constraint to the recent folder panel across viewport sizes so mobile lists scroll instead of expanding beyond the browse/actions section.

Validated with npm run typecheck --workspace @codenomad/ui.
diff --git a/packages/ui/src/styles/components/folder-home.css b/packages/ui/src/styles/components/folder-home.css
@@ -9,6 +9,12 @@
   min-height: 100%;
 }
 
+@media (max-width: 639px) {
+  .folder-home-shell {
+    padding-top: 3.5rem;
+  }
+}
+
 .folder-home-hero {
   margin-bottom: 1.5rem;
 }
@@ -36,6 +42,8 @@
 
 .folder-home-list-panel {
   min-height: 16rem;
+  height: var(--folder-home-actions-height, auto);
+  max-height: var(--folder-home-actions-height, none);
 }
 
 @media (min-width: 1024px) {
@@ -50,10 +58,6 @@
     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) {

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,12 @@`
`9`	`9`	`min-height: 100%;`
`10`	`10`	`}`
`11`	`11`
	`12`	`+@media (max-width: 639px) {`
	`13`	`+ .folder-home-shell {`
	`14`	`+ padding-top: 3.5rem;`
	`15`	`+ }`
	`16`	`+}`
	`17`	`+`
`12`	`18`	`.folder-home-hero {`
`13`	`19`	`margin-bottom: 1.5rem;`
`14`	`20`	`}`
`@@ -36,6 +42,8 @@`
`36`	`42`
`37`	`43`	`.folder-home-list-panel {`
`38`	`44`	`min-height: 16rem;`
	`45`	`+ height: var(--folder-home-actions-height, auto);`
	`46`	`+ max-height: var(--folder-home-actions-height, none);`
`39`	`47`	`}`
`40`	`48`
`41`	`49`	`@media (min-width: 1024px) {`
`@@ -50,10 +58,6 @@`
`50`	`58`	`min-width: 0;`
`51`	`59`	`}`
`52`	`60`
`53`		`- .folder-home-list-panel {`
`54`		`- height: var(--folder-home-actions-height, auto);`
`55`		`- max-height: var(--folder-home-actions-height, none);`
`56`		`- }`
`57`	`61`	`}`
`58`	`62`
`59`	`63`	`@media (min-width: 640px) and (min-height: 721px) {`