fix: 🐛 fix SideBar layout styling (#268)

* fix: 🐛 fix SideBar layout styling * style: 💄 make sidebar min-h-full * style: 💄 update styling
vektorprogrammet · Mar 13, 2024 · c6aee65 · c6aee65
1 parent 9fe9bf5
commit c6aee65
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/pages/controlpanel/components/SideBar.tsx b/src/pages/controlpanel/components/SideBar.tsx
@@ -51,7 +51,7 @@ const Icon: React.FC<IconProps> = ({ svg, name }) => {
 
 const SideBar = (): JSX.Element => {
   return (
-    <div className="bg-vektor-kontrollblue border-8 rounded-3xl w-24 sm:w-32 md:w-40 h-full flex flex-col items-center justify-start fixed overflow-y-auto overflow-x-hidden">
+    <div className="min-w-min bg-vektor-kontrollblue border-8 rounded-3xl w-24 sm:w-32 md:w-40 min-h-full flex flex-col items-center justify-start overflow-y-auto overflow-x-hidden">
       <div className="bg-white rounded-full flex items-center justify-center mt-2 w-16 h-16 sm:w-24 sm:h-24">
         <img
           src="/images/vektor-logo-circle.svg"

diff --git a/src/pages/controlpanel/index.tsx b/src/pages/controlpanel/index.tsx
@@ -4,7 +4,7 @@ import SideBar from "./components/SideBar";
 
 const ControlPanel = (): JSX.Element => {
   return (
-    <div className="bg-gray-100 flex flex-row">
+    <div className="bg-gray-100 flex flex-row min-h-screen">
       <SideBar />
       <Outlet />
     </div>