fix: improve header responsiveness on very small screens

Author: innocenzi

src/Web/x-header.view.php

@@ -21,7 +21,7 @@ class="group w-full lg:max-w-5xl xl:max-w-7xl 2xl:max-w-8xl fixed lg:rounded-xl
           <img src="/img/logo-transparent.svg" alt="Tempest logo" class="size-full" />
         </div>
         <span class="font-medium hidden lg:inline">Tempest</span>
-				<span class="text-xs tracking-wide font-medium text-(--ui-text-muted) bg-(--ui-bg)/50 px-2 py-1 rounded-lg border border-(--ui-border)">
+				<span class="hidden md:inline text-xs tracking-wide font-medium text-(--ui-text-muted) bg-(--ui-bg)/50 px-2 py-1 rounded-lg border border-(--ui-border)">
 					v{{ \Tempest\Core\Kernel::VERSION }}
 				</span>
       </a>
@@ -34,7 +34,10 @@ class="group w-full lg:max-w-5xl xl:max-w-7xl 2xl:max-w-8xl fixed lg:rounded-xl
         <a
 					:href="uri([ChapterController::class, 'index'])"
 					class="transition hover:text-(--ui-text-highlighted) <?= is_uri([ChapterController::class, '__invoke']) ? 'md:text-(--ui-primary)' : '' ?>"
-				>Documentation</a>
+				>
+					<span class="sm:hidden">Docs</span>
+					<span class="hidden sm:inline">Documentation</span>
+				</a>
         <a
 					:href="uri([BlogController::class, 'index'])"
 					class="transition hover:text-(--ui-text-highlighted) <?= is_uri([BlogController::class, 'show']) || is_uri([BlogController::class, 'index']) ? 'md:text-(--ui-primary)' : '' ?>"