From ae2b7c11693bce64974257d56b0afe9f54e001a5 Mon Sep 17 00:00:00 2001
From: Boban Blaskovic <boban.blaskovic@gmail.com>
Date: Mon, 1 Jun 2026 00:06:46 +0200
Subject: [PATCH] Sidebar position:fixed (never scrolls) + main bottom padding
 + mobile responsive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User reported sidebar scrolling with content + missing bottom padding +
unresponsive site details/header.

Sidebar:
- Changed from position:sticky (which moved with grid context) to
  position:fixed top:14 left:14 width:236 height:calc(100vh-28px).
  Sidebar now genuinely never moves with scroll.
- Grid template adjusted to 264px first column to reserve the space the
  fixed sidebar occupies (236 + 14 margin + 14 gap).

Main:
- layouts/app.blade.php + placeholder.blade.php padding bumped from
  '14px 14px 0' to '14px' all-around — content now has equal bottom
  breathing room.

Mobile (≤920px):
- Sidebar already had drawer behaviour, kept.
- Topbar: flex-wrap, smaller padding (10/12), shrunk title/sub typography,
  search takes full row at order:99.
- Site-hero (site details): flex:1 1 100% forces title onto its own row,
  smaller favicon (34px) + smaller h1 (15px) + flex-wrap sub-line.
- Status chip in topbar hidden on mobile (was clipping behind site title).
- clu-dtabs (6-tab bar): wrap with smaller pad/font so all 6 fit on 420px.
- File manager: tree+editor stack vertically; tree max-height 280px,
  editor 460px.
- Inline two-col grids (Installation/Schnellaktionen, Sites+Activity,
  WP+Salts, OPcache+Extensions) force to single column.
---
 app/resources/css/app.css                 | 50 ++++++++++++++++++++---
 app/resources/views/layouts/app.blade.php |  2 +-
 app/resources/views/placeholder.blade.php |  2 +-
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/app/resources/css/app.css b/app/resources/css/app.css
index a711432..af92cdb 100644
--- a/app/resources/css/app.css
+++ b/app/resources/css/app.css
@@ -635,13 +635,18 @@
   .clu-top-link a { color: var(--color-accent); font-weight: 600; }
 
   /* ───── App layout (sidebar + main) ───── */
-  .clu-app-grid { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
+  .clu-app-grid {
+    display: grid;
+    grid-template-columns: 264px 1fr; /* 236 sidebar + 14 left margin + 14 gap */
+    min-height: 100vh;
+  }
 
-  /* Sidebar — fixed brand+ws-switch header, scrollable nav, fixed plan-box footer */
+  /* Sidebar — TRUE fixed; never scrolls with main content. */
   .clu-sidebar {
-    position: sticky; top: 0;
-    height: 100vh;
-    margin: 14px 0 14px 14px;
+    position: fixed;
+    top: 14px; left: 14px;
+    width: 236px;
+    height: calc(100vh - 28px);
     border-radius: var(--radius);
     display: flex; flex-direction: column;
     padding: 18px 14px;
@@ -686,6 +691,41 @@
     .clu-sidebar.open { transform: translateX(0); }
     .clu-sidebar-backdrop.open { display: block; }
     .clu-burger.clu-icon-btn { display: grid; }
+
+    /* Topbar mobile: wrap + slim padding */
+    .clu-topbar {
+      flex-wrap: wrap;
+      padding: 10px 12px;
+      gap: 10px;
+    }
+    .clu-topbar h1, .clu-page-title { font-size: 15px; }
+    .clu-topbar .crumb, .clu-page-sub { font-size: 11px; }
+    .clu-search { min-width: 0; flex: 1 0 100%; order: 99; }
+    .clu-topbar .spacer { flex: 1; }
+
+    /* Site Details site-hero mobile: smaller favicon + truncate domain + hide on small */
+    .clu-site-hero { gap: 10px; flex: 1 1 100%; min-width: 0; order: 5; }
+    .clu-site-hero .clu-favicon { width: 34px; height: 34px; font-size: 14px; }
+    .clu-site-hero h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .clu-site-hero .sub { gap: 6px; font-size: 10.5px; flex-wrap: wrap; }
+
+    /* Status chip + secondary buttons hide on tightest screens */
+    .clu-topbar .clu-status-chip { display: none; }
+
+    /* Dtabs (site-details tab row) wrap properly */
+    .clu-dtabs { flex-wrap: wrap; gap: 2px; }
+    .clu-dtab { padding: 7px 10px; font-size: 12px; }
+
+    /* Filemanager stacks below editor on small screens */
+    .clu-fm { grid-template-columns: 1fr; }
+    .clu-tree { max-height: 280px; }
+    .clu-editor { height: 460px; }
+
+    /* Two-col cards (Overview Installation/Schnellaktionen etc.) stack */
+    .grid[style*="grid-template-columns:1fr 1fr"],
+    .grid[style*="grid-template-columns:minmax(0,2fr) minmax(280px,1fr)"] {
+      grid-template-columns: 1fr !important;
+    }
   }
   .clu-brand-row { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
   .clu-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
diff --git a/app/resources/views/layouts/app.blade.php b/app/resources/views/layouts/app.blade.php
index a18ba90..583f4d9 100644
--- a/app/resources/views/layouts/app.blade.php
+++ b/app/resources/views/layouts/app.blade.php
@@ -22,7 +22,7 @@
     <div class="clu-app-grid">
         <x-clu.sidebar :active="$active ?? request()->route()?->getName()" />
 
-        <main class="flex flex-col min-w-0" style="padding:14px 14px 0;">
+        <main class="flex flex-col min-w-0" style="padding:14px;">
             {{ $slot }}
         </main>
     </div>
diff --git a/app/resources/views/placeholder.blade.php b/app/resources/views/placeholder.blade.php
index 2bb0602..4478815 100644
--- a/app/resources/views/placeholder.blade.php
+++ b/app/resources/views/placeholder.blade.php
@@ -14,7 +14,7 @@
 <body class="clu-bg-aurora">
     <div class="clu-app-grid">
         <x-clu.sidebar :active="request()->route()?->getName()" />
-        <main class="flex flex-col min-w-0" style="padding:14px 14px 0;">
+        <main class="flex flex-col min-w-0" style="padding:14px;">
             <div class="clu-topbar">
                 <div>
                     <h1>{{ $title ?? 'Coming soon' }}</h1>