fix(ui): sidebar layout — inline styles for flex-col/flex-1
Some checks failed
Build and Deploy / build-push-deploy (push) Has been cancelled

flex-col and flex-1 were absent from the compiled prod.css (Tailwind only
bundles classes that appeared in templates at build time; these were new).
The body ended up as flex-row, placing the top nav beside the sidebar
instead of above it.

Replace Tailwind layout-structural classes with inline styles on body and
the sidebar wrapper so the column layout is independent of the CSS bundle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-03 01:01:35 +02:00
parent 08d662daca
commit e8b0c7c554

View File

@@ -160,8 +160,8 @@ defaultLayout inner = [hsx|
<script src="/vendor/ihp-auto-refresh.js"></script> <script src="/vendor/ihp-auto-refresh.js"></script>
<script src="/js/ihf-annotation-launcher.js"></script> <script src="/js/ihf-annotation-launcher.js"></script>
</head> </head>
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col"> <body class="bg-gray-50 text-gray-900" style="min-height:100vh;display:flex;flex-direction:column">
<nav class="bg-white border-b border-gray-200 px-6 py-3 flex items-center flex-shrink-0"> <nav class="bg-white border-b border-gray-200 px-6 py-3 flex items-center">
<a href={LandingAction} class="font-semibold text-indigo-600">inter-hub</a> <a href={LandingAction} class="font-semibold text-indigo-600">inter-hub</a>
<div class="ml-auto flex items-center gap-5"> <div class="ml-auto flex items-center gap-5">
<a href={CapabilitiesAction} class="text-sm text-gray-500 hover:text-gray-900">About</a> <a href={CapabilitiesAction} class="text-sm text-gray-500 hover:text-gray-900">About</a>
@@ -174,7 +174,7 @@ defaultLayout inner = [hsx|
</form> </form>
</div> </div>
</nav> </nav>
<div class="flex flex-1"> <div class="flex" style="flex:1">
<aside class="w-48 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto"> <aside class="w-48 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
<nav class="px-3 py-4 space-y-0.5"> <nav class="px-3 py-4 space-y-0.5">
<a href={HubsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Hubs</a> <a href={HubsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Hubs</a>
@@ -208,7 +208,7 @@ defaultLayout inner = [hsx|
<a href={MarketplaceDashboardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Marketplace</a> <a href={MarketplaceDashboardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Marketplace</a>
</nav> </nav>
</aside> </aside>
<main class="flex-1 px-8 py-8 overflow-y-auto"> <main class="px-8 py-8 overflow-y-auto" style="flex:1">
<div class="max-w-5xl"> <div class="max-w-5xl">
{inner} {inner}
</div> </div>