Sidebar position:fixed (never scrolls) + main bottom padding + mobile responsive

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.
master
Boban Blaskovic 2026-06-01 00:06:46 +02:00
parent 29622eff77
commit ae2b7c1169
3 changed files with 47 additions and 7 deletions

View File

@ -635,13 +635,18 @@
.clu-top-link a { color: var(--color-accent); font-weight: 600; } .clu-top-link a { color: var(--color-accent); font-weight: 600; }
/* ───── App layout (sidebar + main) ───── */ /* ───── 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 { .clu-sidebar {
position: sticky; top: 0; position: fixed;
height: 100vh; top: 14px; left: 14px;
margin: 14px 0 14px 14px; width: 236px;
height: calc(100vh - 28px);
border-radius: var(--radius); border-radius: var(--radius);
display: flex; flex-direction: column; display: flex; flex-direction: column;
padding: 18px 14px; padding: 18px 14px;
@ -686,6 +691,41 @@
.clu-sidebar.open { transform: translateX(0); } .clu-sidebar.open { transform: translateX(0); }
.clu-sidebar-backdrop.open { display: block; } .clu-sidebar-backdrop.open { display: block; }
.clu-burger.clu-icon-btn { display: grid; } .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-row { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.clu-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; } .clu-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }

View File

@ -22,7 +22,7 @@
<div class="clu-app-grid"> <div class="clu-app-grid">
<x-clu.sidebar :active="$active ?? request()->route()?->getName()" /> <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 }} {{ $slot }}
</main> </main>
</div> </div>

View File

@ -14,7 +14,7 @@
<body class="clu-bg-aurora"> <body class="clu-bg-aurora">
<div class="clu-app-grid"> <div class="clu-app-grid">
<x-clu.sidebar :active="request()->route()?->getName()" /> <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 class="clu-topbar">
<div> <div>
<h1>{{ $title ?? 'Coming soon' }}</h1> <h1>{{ $title ?? 'Coming soon' }}</h1>