Fix bottom bar UI when shrunk

Author: nab138

src/components/Tiles/BottomBar.tsx

@@ -77,10 +77,13 @@ export default function BottomBar() {
           size="sm"
           sx={{
             minHeight: 33,
+
+            overflowX: "auto",
             "& .MuiTab-root": {
               fontSize: 12,
               minHeight: 24,
               padding: "2px 8px",
+              flexShrink: 0,
             },
           }}
         >
@@ -243,6 +246,7 @@ function BottomBarFilter({
           sx={{
             marginRight: "var(--padding-xs)",
             fontSize: "12px",
+            flexShrink: 0,
           }}
           size="sm"
         />
@@ -256,6 +260,7 @@ function BottomBarFilter({
           }}
           sx={{
             width: "200px",
+            minWidth: "150px",
             marginRight: "var(--padding-xs)",
             fontSize: "12px",
           }}
@@ -271,6 +276,7 @@ function BottomBarFilter({
           sx={{
             marginRight: "var(--padding-xs)",
             fontSize: "12px",
+            flexShrink: 0,
           }}
           after={() => {
             setRefresh((prev) => prev + 1);

src/pages/IDE.css

@@ -26,7 +26,6 @@
   justify-content: center;
   align-items: center;
   gap: var(--padding-lg);
-  margin-bottom: var(--padding-lg);
 }
 
 .screenshot-img-container {
@@ -36,12 +35,12 @@
   align-items: center;
   min-height: 0;
   min-width: 0;
-  /* No padding or margin here */
 }
 
 .screenshot-img-container > img {
+  transform: translateY(calc(-1 * var(--padding-xs)));
   max-width: 100%;
-  max-height: calc(100% - var(--padding-md) * 2);
+  max-height: calc(100% - var(--padding-md) * 4);
   object-fit: contain;
   display: block;
 }