From 23e86372dfda6e3561437ec655eab58759176509 Mon Sep 17 00:00:00 2001
From: Alessio Biancalana <alessio.biancalana@suse.com>
Date: Wed, 27 Apr 2022 15:14:51 +0200
Subject: [PATCH 1/2] Fix double scrollbars

---
 assets/css/app.css                     |  4 +++
 assets/js/components/Layout/Layout.jsx | 35 ++++++++++++++++----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index cde5fc2bc0..3409f4f950 100644
--- 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
index 4321567d12..d5e807b771 100644
--- a/assets/js/components/Layout/Layout.jsx
+++ b/assets/js/components/Layout/Layout.jsx
@@ -67,11 +67,11 @@ const Layout = () => {
 
   return (
     <>
-      <main className="bg-gray-100 dark:bg-gray-800 h-screen overflow-hidden relative">
+      <main className="bg-gray-100 dark:bg-gray-800 relative">
         <div className="flex 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',
               { hidden: isCollapsed }
             )}
           >
@@ -109,7 +109,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}
@@ -175,7 +180,11 @@ const Layout = () => {
                 </div>
               </div> */}
             </header>
-            <div className="overflow-auto h-screen pb-24 px-4 md:px-6">
+            <div
+              className={classNames('pb-24 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">
@@ -186,16 +195,16 @@ const Layout = () => {
             </div>
           </div>
         </div>
+        <footer className="p-4 z-10 fixed 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>
       </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>
     </>
   );
 };

From 3dfbfd531472634c7290579a5111a303b2c10a72 Mon Sep 17 00:00:00 2001
From: Alessio Biancalana <alessio.biancalana@suse.com>
Date: Thu, 28 Apr 2022 15:24:00 +0200
Subject: [PATCH 2/2] Make the footer not sticky to bottom but just... bottom

---
 assets/js/components/Layout/Layout.jsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/js/components/Layout/Layout.jsx b/assets/js/components/Layout/Layout.jsx
index d5e807b771..40b08f98d1 100644
--- a/assets/js/components/Layout/Layout.jsx
+++ b/assets/js/components/Layout/Layout.jsx
@@ -68,10 +68,10 @@ const Layout = () => {
   return (
     <>
       <main className="bg-gray-100 dark:bg-gray-800 relative">
-        <div className="flex items-start justify-between">
+        <div className="flex flex-col h-screen items-start justify-between">
           <div
             className={classNames(
-              'h-screen block shadow-lg fixed w-64 flex-shrink-0',
+              'h-screen block shadow-lg fixed w-64 flex-shrink-0 z-20',
               { hidden: isCollapsed }
             )}
           >
@@ -181,7 +181,7 @@ const Layout = () => {
               </div> */}
             </header>
             <div
-              className={classNames('pb-24 px-4 md:px-6', {
+              className={classNames('pb-24 inset-x-0 bottom-0 px-4 md:px-6', {
                 'ml-64': !isCollapsed,
               })}
             >
@@ -194,16 +194,16 @@ 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>
-        <footer className="p-4 z-10 fixed 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>
       </main>
     </>
   );