From 5ef304b690486cff53322ce10fe3795bbe9ef58a Mon Sep 17 00:00:00 2001
From: kgva CMS <cms@karimgabrielevarano.xyz>
Date: Mon, 10 Aug 2026 22:14:11 +0000
Subject: [PATCH] fix: pin project file list to the fixed column position,
 shrink+dim the info panel, drop obsolete lang-switch padding

---
 assets/css/custom.css | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 87bdd2f..c5a7012 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -169,35 +169,40 @@ body:not(.home) .menu { display: none; }
 
 /* ─────────────────── PROJECT INFO PANEL ─────────────────── */
 /* info.md (the project description / about text) lives outside the
-   filebrowser now — on wide viewports it sits to the right of the whole
-   file list, clearing the "$ ls" / "total N" shell lines up top; on narrow
-   ones there's no room for two columns, so it just stacks below instead. */
+   filebrowser now — on wide viewports it sits to the right of the file
+   list, clearing the "$ ls" / "total N" shell lines up top; on narrow ones
+   there's no room for two columns, so it just stacks below instead.
+   the file list itself always stays exactly where the single centered
+   column normally sits — same position with or without an info panel,
+   so nothing shifts around depending on whether a page has text. */
 .proj-layout { display: block; }
 .proj-info {
   margin: 1.5rem 0 0;
   font-family: var(--font-family-serif);
-  font-size: 1.05em;
+  font-size: 0.85em;
   line-height: 1.6;
 }
 .proj-info > :first-child { margin-top: 0; }
 .proj-info > :last-child { margin-bottom: 0; }
 
-@media (min-width: 900px) {
+@media (min-width: 1100px) {
   .proj-layout {
     width: 100vw;
     margin-left: calc(50% - 50vw);
-    margin-right: calc(50% - 50vw);
-    padding: 0 1.5rem;
+    /* pushes the file list back out to the same spot the narrow centered
+       column always occupies — this is a fixed position, not a re-centered
+       pair, so it doesn't move depending on whether .proj-info exists */
+    padding-left: calc((100vw - var(--container-width)) / 2);
+    padding-right: 1.5rem;
     box-sizing: border-box;
     display: flex;
-    justify-content: center;
     align-items: flex-start;
-    gap: 2.5rem;
+    gap: 1.5rem;
   }
-  .proj-layout .filebrowser { flex: 0 1 var(--container-width); min-width: 0; }
+  .proj-layout .filebrowser { flex: 0 0 var(--container-width); }
   .proj-info {
-    flex: 0 1 calc(var(--container-width) - 4rem);   /* slightly narrower than the content column */
-    margin-top: 3.6rem;                               /* clear the two shell lines above the file list */
+    flex: 0 0 18rem;
+    margin-top: 3.6rem;   /* clear the two shell lines above the file list */
   }
 }
 
@@ -457,5 +462,5 @@ img { filter: none; }
   z-index: 2;
 }
 .lang-switch:hover { color: var(--color-text-primary); border-bottom: 1px solid; }
-/* keep the prompt text clear of the toggle so long paths never slide under it */
-.prompt { padding-right: 3.5ch; }
+/* no static width reservation needed here anymore — syncLangSwitch() (shell.js)
+   already hides the toggle the moment a long line would reach it */