panel padding

Author: Barsnes

apps/theme/app/globals.css

@@ -37,6 +37,8 @@ code {
   display: flex;
 
   @media screen and (max-width: 768px) {
+    --panel-padding: var(--ds-size-6);
+
     flex-direction: column;
   }
 }

apps/theme/components/ColorPreview/ColorPreview.module.css

@@ -3,6 +3,10 @@
   overflow-x: auto;
 }
 
+.list {
+  overflow-x: auto;
+}
+
 .card {
   display: flex;
   flex-direction: column;

apps/theme/components/ColorPreview/ColorPreview.tsx

@@ -139,7 +139,12 @@ export const ColorPreview = () => {
           </ToggleGroup>
         </div>
       </div>
-      <div className={cl('panelRight', view === 'grid' && classes.grid)}>
+      <div
+        className={cl(
+          'panelRight',
+          view === 'grid' ? classes.grid : classes.list,
+        )}
+      >
         {colors.main.map((color, index) => (
           <CardWrapper key={index} color={color} />
         ))}