Fix App Bar Icon Shrinking and Wrapper Overlapping with main contents…

… Issues (code100x#1612)

* fixed app bar icon sizing issue by setting min-width to app bar

* fix: update styling for wrapper and set min-width to 2rem to resolve layout issues

* updated min-width of appbar when collapsed to 4rem

src/app/globals.css

@@ -216,7 +216,7 @@
 
 @layer utilities {
   .wrapper {
-    @apply h-full w-full max-w-7xl px-4 py-4 md:px-12 lg:mx-auto xl:max-w-[90rem];
+    @apply h-full w-full max-w-7xl px-4 py-4 md:px-12 lg:px-20 lg:mx-auto xl:max-w-[90rem];
   }
 
   .flex-center {

src/components/Appbar.tsx

@@ -66,7 +66,7 @@ export const Appbar = () => {
           stiffness: 200,
           damping: 20,
         }}
-        className="fixed left-0 top-0 z-[999] hidden h-full flex-col border-r border-primary/10 bg-background dark:bg-background lg:flex"
+        className="fixed left-0 top-0 z-[999] hidden h-full flex-col border-r border-primary/10 bg-background dark:bg-background lg:flex min-w-16"
       >
         <div className="flex h-full flex-col gap-4">
           <div className="flex w-full items-center border-b border-primary/10 px-2 py-4">