updated ui

app/src/components/ui/componets/DisplayZone.tsx

@@ -135,7 +135,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   };
 
   return (
-    <div className="zone-wrapper">
+    <div
+      className={`zone-wrapper ${
+        selectedZone.activeSides.includes("bottom") && "bottom"
+      }`}
+    >
       {/* Left Arrow */}
       {showLeftArrow && (
         <button className="arrow left-arrow" onClick={handleScrollLeft}>
@@ -144,7 +148,12 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       )}
 
       {/* Zones Wrapper */}
-      <div ref={containerRef} className="zones-wrapper">
+      <div
+        ref={containerRef}
+        className={`zones-wrapper ${
+          selectedZone.activeSides.includes("bottom") && "bottom"
+        }`}
+      >
         {Object.keys(zonesData).map((zoneName, index) => (
           <div
             key={index}