panel padding

digdir · Mar 4, 2025 · d5d085e · d5d085e
1 parent 49bbbff
commit d5d085e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/apps/theme/app/globals.css b/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;
   }
 }

diff --git a/apps/theme/components/ColorPreview/ColorPreview.module.css b/apps/theme/components/ColorPreview/ColorPreview.module.css
@@ -3,6 +3,10 @@
   overflow-x: auto;
 }
 
+.list {
+  overflow-x: auto;
+}
+
 .card {
   display: flex;
   flex-direction: column;

diff --git a/apps/theme/components/ColorPreview/ColorPreview.tsx b/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} />
         ))}