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 @@
-
+
{{ $slot }}
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 @@
-
+

{{ $title ?? 'Coming soon' }}