Improve layout responsiveness and printing output

Author: merlinz01

frontend/src/App.tsx

@@ -89,7 +89,7 @@ function App() {
     )
   } else {
     return (
-      <div className="bg-base-100 flex h-screen w-screen flex-col">
+      <div className="bg-base-100 flex h-screen w-screen flex-col print:h-auto">
         <Header />
         <SidebarHolder>
           <Routes />
@@ -140,9 +140,10 @@ function SidebarHolder({ children }: { children: React.ReactNode }) {
       />
       <div
         className={
-          isMobile
+          'print:hidden ' +
+          (isMobile
             ? `drawer-side z-30 ${showDrawer ? 'drawer-open' : ''}`
-            : 'border-base-300 transition-width flex w-64 shrink-0 flex-col overflow-hidden border-r duration-300 ease-out'
+            : 'border-base-300 transition-width flex w-64 shrink-0 flex-col overflow-hidden border-r duration-300 ease-out')
         }
         style={{ width: showDrawer ? undefined : 0 }}
       >
@@ -151,12 +152,7 @@ function SidebarHolder({ children }: { children: React.ReactNode }) {
           <Sidebar />
         </div>
       </div>
-      <div
-        className="drawer-content flex grow flex-col overflow-auto p-2"
-        style={{ scrollbarGutter: 'stable' }}
-      >
-        {children}
-      </div>
+      <div className="drawer-content flex grow flex-col">{children}</div>
     </div>
   )
 }

frontend/src/components/Header.tsx

@@ -13,7 +13,7 @@ export default function Header() {
   const config = useConfig((state) => state.config)
 
   return (
-    <header className="navbar bg-base-300 z-20 flex min-h-12 w-screen max-w-screen items-center p-1 shadow-lg">
+    <header className="navbar bg-base-300 z-20 flex min-h-12 w-screen max-w-screen items-center p-1 shadow-md print:hidden">
       <button
         className="btn btn-ghost btn-square me-2"
         title="Toggle drawer"

frontend/src/main.tsx

@@ -16,7 +16,7 @@ if (configJSON) {
   }
 }
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.body).render(
   <StrictMode>
     <Router>
       <App />

frontend/src/pages/DocPage.tsx

@@ -173,9 +173,9 @@ export default function DocPage() {
     <>
       {error && <div className="alert alert-error mt-6 max-w-100 self-center">{error}</div>}
       {doc && (
-        <div className="flex grow items-start justify-center">
-          <div className="mx-0 flex min-h-full max-w-200 shrink grow flex-col overflow-hidden p-4 sm:mx-2 md:mx-4 lg:mx-8">
-            <nav className="breadcrumbs text-sm" aria-label="Breadcrumbs">
+        <div className="flex grow items-start overflow-hidden">
+          <div className="mx-auto flex h-full min-h-full max-w-200 grow flex-col overflow-y-auto px-4 pt-2 pb-8 sm:px-4 md:px-8 lg:px-12 print:px-4">
+            <nav className="breadcrumbs shrink-0 text-sm" aria-label="Breadcrumbs">
               <ul className="flex-wrap">
                 <li>
                   <Link to="/">Home</Link>
@@ -251,7 +251,7 @@ export default function DocPage() {
               </li>
             </ul>
           </div>
-          <aside className="border-base-300 sticky top-0 me-[-8px] hidden max-h-[calc(100vh-4em)] w-50 shrink-0 overflow-y-auto border-l p-4 lg:block">
+          <aside className="border-base-300 hidden max-h-full w-50 shrink-0 overflow-y-auto border-l p-4 lg:block print:hidden">
             <h2 className="text-md text-secondary mb-2 font-semibold">In this page</h2>
             <ul className="list-none pl-4 text-gray-500">
               {doc.metadata.subtitles.map((heading) => (

frontend/src/pages/NewDocPage.tsx

@@ -91,7 +91,7 @@ export default function NewDocPage() {
   }, [parentId, documents, title])
 
   return (
-    <div className="card bg-base-200 m-4 shadow-lg">
+    <div className="card bg-base-200 m-4 max-h-full overflow-y-auto shadow-lg">
       <form className="card-body flex flex-col gap-4" onSubmit={submit} role="form">
         <div className="card-title">
           <h2 className="text-2xl font-bold">Create New Document</h2>

frontend/src/pages/UploadsPage.tsx

@@ -130,7 +130,7 @@ export default function UploadsPage() {
     }
   }
   return (
-    <div className="card border-base-300 bg-base-200 m-4 shadow-lg">
+    <div className="card border-base-300 bg-base-200 m-4 max-h-full overflow-y-auto shadow-lg">
       <div className="card-body">
         <div className="mb-4 flex items-center justify-between">
           <h1 className="card-title">Uploads</h1>

frontend/src/pages/UsersPage.tsx

@@ -132,7 +132,7 @@ export default function UsersPage() {
     }
   }
   return (
-    <div className="card border-base-300 bg-base-200 m-4 border shadow-lg">
+    <div className="card border-base-300 bg-base-200 m-4 max-h-full overflow-y-auto border shadow-lg">
       <div className="card-body">
         <div className="mb-4 flex items-center justify-between">
           <h2 className="card-title text-2xl">Users</h2>