Fix double scrollbar layout, take two (#470)

* Fix double scrollbars * Make the footer not sticky to bottom but just... bottom
trento-project · Apr 28, 2022 · ee4572c · ee4572c
1 parent 3dab27a
commit ee4572c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -18,3 +18,7 @@
 .table-col-m {
   width: 20rem;
 }
+
+html {
+  background-color: rgb(243 244 246);
+}
diff --git a/assets/js/components/Layout/Layout.jsx b/assets/js/components/Layout/Layout.jsx
@@ -71,11 +71,11 @@ const Layout = () => {
 
   return (
     <>
-      <main className="bg-gray-100 dark:bg-gray-800 h-screen overflow-hidden relative">
-        <div className="flex items-start justify-between">
+      <main className="bg-gray-100 dark:bg-gray-800 relative">
+        <div className="flex flex-col h-screen items-start justify-between">
           <div
             className={classNames(
-              'h-screen block shadow-lg relative w-64 flex-shrink-0',
+              'h-screen block shadow-lg fixed w-64 flex-shrink-0 z-20',
               { hidden: isCollapsed }
             )}
           >
@@ -113,7 +113,12 @@ const Layout = () => {
           </div>
           <div className="flex flex-col w-full md:space-y-4">
             <header className="w-full h-16 z-40 flex items-center justify-between">
-              <div className="block ml-6">
+              <div
+                className={classNames('block', {
+                  'ml-72': !isCollapsed,
+                  'ml-6': isCollapsed,
+                })}
+              >
                 <button
                   className="flex p-2 items-center rounded-full bg-white shadow text-gray-500 text-md"
                   onClick={handleSidebar}
@@ -145,7 +150,11 @@ const Layout = () => {
                 </div>
               </div>
             </header>
-            <div className="overflow-auto h-screen pb-24 px-4 md:px-6">
+            <div
+              className={classNames('pb-24 inset-x-0 bottom-0 px-4 md:px-6', {
+                'ml-64': !isCollapsed,
+              })}
+            >
               <div className="py-6">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
                   <div className="py-4">
@@ -155,17 +164,17 @@ const Layout = () => {
               </div>
             </div>
           </div>
+          <footer className="p-4 z-30 relative bottom-0 w-full bg-white shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
+            <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
+              © 2020-2022 SUSE LLC
+            </span>
+            <span className="flex items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
+              This tool is free software released under the Apache License,
+              Version 2.0
+            </span>
+          </footer>
         </div>
       </main>
-      <footer className="p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
-        <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
-          © 2020-2022 SUSE LLC
-        </span>
-        <span className="flex items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
-          This tool is free software released under the Apache License, Version
-          2.0
-        </span>
-      </footer>
     </>
   );
 };