style(app): improve layout and styling for responsiveness

- Add flex: 1 style to LazyFlex container in App component for better flex layout
- Update inner LazyFlex in App with flex: 1 and height 100% for full height alignment
- Remove fixed width and box-sizing from Settings component container and add flex: 1
- Change Sidebar height from fixed 560px to 100vh for full viewport height
- Adjust SidebarButtons padding for better spacing and layout
- Modify ThemeMenu thumbnails container flex from 7 to 1 and increase thumbnail size to 72px
- Update ThemeMenu padding for uniform spacing
- Add global CSS resets: margin 0, padding 0 and box-sizing border-box to all elements
- Set root container to display flex and add padding to improve overall layout
- Remove obsolete appVars global theme and update styles to avoid fixed widths

Author: thep0y

src/App.tsx

@@ -44,11 +44,23 @@ const App = () => {
 
   return (
     <>
-      <LazyFlex class={styles.app} align="center" gap="l" justify="stretch">
+      <LazyFlex
+        class={styles.app}
+        align="center"
+        gap="l"
+        justify="stretch"
+        style={{ flex: 1 }}
+      >
         <Sidebar />
 
         <Show when={!showSettings() && currentTheme()} fallback={<Settings />}>
-          <LazyFlex direction="column" gap="l" align="center">
+          <LazyFlex
+            direction="column"
+            gap="l"
+            align="center"
+            justify="center"
+            style={{ flex: 1, height: "100%" }}
+          >
             <Select
               options={monitors()}
               placeholder={translate("label-select-monitor")}

src/components/ImageCarousel/ImageCarousel.css.ts

@@ -1,9 +1,7 @@
 import { globalStyle, style } from "@vanilla-extract/css";
 import { themeContract, vars } from "fluent-solid/lib/themes";
-import { appVars } from "~/themes/vars.css";
 
 export const carousel = style({
-  width: appVars.contentWidth,
   height: "480px",
   borderRadius: vars.borderRadiusMedium,
   display: "flex",

src/components/Settings/index.tsx

@@ -7,16 +7,16 @@ import GithubMirror from "./GithubMirror";
 import ThemesDirectory from "./ThemesDirectory";
 import LockScreenWallpaperSwitch from "./LockScreenWallpaperSwitch";
 import SettingsFooter from "./Footer";
-import { appVars } from "~/themes/vars.css";
 
 const Settings = () => {
   return (
     <LazyFlex
       direction="column"
       style={{
-        width: appVars.contentWidth,
-        "box-sizing": "border-box",
+        // width: appVars.contentWidth,
+        // "box-sizing": "border-box",
         height: "100%",
+        flex: 1,
       }}
       align="stretch"
       justify="stretch"

src/components/Sidebar/Sidebar.css.ts

@@ -1,7 +1,7 @@
 import { style } from "@vanilla-extract/css";
 
 export const sidebar = style({
-  height: "560px",
+  height: "100vh",
   display: "flex",
   flexDirection: "column",
 });

src/components/Sidebar/SidebarButtons.tsx

@@ -16,7 +16,14 @@ const SidebarButtons = () => {
   };
 
   return (
-    <LazySpace direction="column" gap="s" justify="end" class={sidebarButtons}>
+    <LazySpace
+      direction="column"
+      gap="s"
+      justify="end"
+      paddingBottom="m"
+      paddingRight="10px"
+      class={sidebarButtons}
+    >
       <Show when={updateIsAvailable()}>
         <LazyTooltip
           positioning="after"

src/components/ThemeMenu/ThemeMenu.css.ts

@@ -5,7 +5,7 @@ import { badge as fluentBadge } from "fluent-solid/lib/components/badge/Badge.cs
 export const menuItemColorShadow = createVar();
 
 export const thumbnailsContainer = style({
-  flex: "7",
+  flex: "1",
   overflowY: "auto",
   overflowX: "hidden",
   padding: `${vars.spacingVerticalMNudge} ${vars.spacingHorizontalMNudge} ${vars.spacingVerticalMNudge} ${vars.spacingHorizontalXL}`,
@@ -19,8 +19,8 @@ export const menuItem = style({
   },
   padding: "4px",
   borderRadius: "5px",
-  height: "64px",
-  width: "64px",
+  height: "72px",
+  width: "72px",
   display: "flex",
   alignItems: "center",
   position: "relative",

src/components/ThemeMenu/ThemeMenu.tsx

@@ -71,7 +71,7 @@ const ThemeMenu = (props: ThemeMenuProps) => {
       class={styles.thumbnailsContainer}
       grow={7}
       shrink={1}
-      padding="10px 10px 10px 24px"
+      padding="10px"
     >
       {menu()}
     </LazyFlex>

src/index.css.ts

@@ -28,6 +28,10 @@ globalStyle("*", {
   MozUserSelect: "none",
   WebkitUserSelect: "none",
   msUserSelect: "none",
+
+  margin: 0,
+  padding: 0,
+  boxSizing: "border-box",
 });
 
 globalStyle("::-webkit-scrollbar", {
@@ -54,9 +58,8 @@ globalStyle("body", {
 });
 
 globalStyle("#root", {
+  display: "flex",
+  padding: `${vars.spacingHorizontalXS} ${vars.spacingVerticalL} ${vars.spacingHorizontalL} ${vars.spacingHorizontalL}`,
   height: "100vh",
   width: "100vw",
-  display: "flex",
-  flexDirection: "column",
-  overflow: "hidden",
 });