Merge pull request #434 from raifdmueller/fix/cls-logo-explicit-size

fix: enforce explicit logo height + tighten shell dimensions

Author: rdmueller

website/index.html

@@ -76,9 +76,9 @@
     -->
     <div id="app">
       <div id="shell-root" class="flex flex-col" style="min-height: 100vh;">
-        <div id="shell-header" class="border-b border-[var(--color-border)]" style="min-height: 10.5rem;" aria-hidden="true"></div>
-        <div id="page-content" class="flex-1" style="min-height: calc(100vh - 16.5rem);"></div>
-        <div id="shell-footer" class="border-t border-[var(--color-border)]" style="min-height: 6rem;" aria-hidden="true"></div>
+        <div id="shell-header" class="border-b border-[var(--color-border)]" style="height: 8.75rem;" aria-hidden="true"></div>
+        <div id="page-content" class="flex-1" style="min-height: calc(100vh - 14.75rem);"></div>
+        <div id="shell-footer" class="border-t border-[var(--color-border)]" style="height: 6rem;" aria-hidden="true"></div>
       </div>
     </div>
     <script type="module" src="/src/main.js"></script>

website/src/components/header.js

@@ -11,7 +11,7 @@ export function renderHeader() {
           <!-- Logo left, spanning both rows -->
           <div class="flex items-center">
             <a href="#/" class="no-underline flex flex-col items-center">
-              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="218" height="96" class="max-h-24 w-auto" />
+              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="218" height="96" class="h-24 w-[218px]" />
               <span class="text-xs text-[var(--color-text-secondary)] leading-tight" data-i18n="header.slogan">${i18n.t('header.slogan')}</span>
             </a>
             <button
@@ -100,7 +100,7 @@ export function renderHeader() {
         <div class="sm:hidden">
           <div class="flex flex-col items-center">
             <a href="#/" class="no-underline flex flex-col items-center">
-              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="145" height="64" class="max-h-16 w-auto" />
+              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="145" height="64" class="h-16 w-[145px]" />
               <span class="text-xs text-[var(--color-text-secondary)] leading-tight text-center" data-i18n="header.slogan">${i18n.t('header.slogan')}</span>
             </a>
             <div class="flex items-center gap-3 mt-2">