Improve sidebar height

Signed-off-by: Dmitriy Lazarev <w@kich.dev>
thefrontside · Dec 20, 2023 · a51a5b4 · a51a5b4
1 parent e463959
commit a51a5b4
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/www/components/footer.tsx b/www/components/footer.tsx
@@ -2,7 +2,7 @@ import { IconExternal } from "./icons/external.tsx";
 
 export function Footer(): JSX.Element {
   return (
-    <footer class="grid grid-cols-3 text-center text-gray-500 tracking-wide bg-gray-100 py-8 gap-y-4 leading-8">
+    <footer class="grid grid-cols-3 text-center text-gray-500 tracking-wide bg-gray-100 py-8 gap-y-4 leading-8 justify-self-end">
       <section class="flex flex-col gap-y-1">
         <h1 class="text-sm uppercase font-bold text-blue-primary mb-4">About</h1>
         <a class="text-gray-800" href="https://frontside.com">

diff --git a/www/components/header.tsx b/www/components/header.tsx
@@ -5,7 +5,7 @@ import { Navburger } from "./navburger.tsx";
 
 export function Header() {
   return (
-    <header class="header w-full top-0 p-6 py-8 sticky tracking-wide z-10 max-w-screen-2xl m-auto">
+    <header class="header w-full top-0 p-6 py-8 sticky tracking-wide z-10 max-w-screen-2xl mx-auto">
       <div class="flex items-center justify-between">
         <div class="flex">
           <a

diff --git a/www/routes/app.html.tsx b/www/routes/app.html.tsx
@@ -61,9 +61,9 @@ export function* useAppHtml({
           <link rel="stylesheet" href="/assets/prism-atom-one-dark.css" />
         </noscript>
       </head>
-      <body>
+      <body class="flex flex-col h-full">
         <Header />
-        <main class="container max-w-screen-2xl m-auto">{children}</main>
+        <main class="container max-w-screen-2xl mx-auto mb-auto">{children}</main>
         <Footer />
       </body>
     </html>

diff --git a/www/routes/docs-route.tsx b/www/routes/docs-route.tsx
@@ -68,7 +68,7 @@ export function docsRoute(docs: Docs): JSXHandler {
               class="h-full w-full bg-gray-500 opacity-50"
             />
           </aside>
-          <aside class="min-h-0 h-full overflow-auto hidden md:block pt-2 top-24 sticky h-screen">
+          <aside class="min-h-0 overflow-auto hidden md:block pt-2 top-24 sticky h-fit">
             <nav class="pl-4">
               {topics.map((topic) => (
                 <hgroup class="mb-2">