From 2e1f7df7e6b883a6cc08762a195f17fd987e7fdb Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Sat, 10 May 2025 15:28:18 +0000
Subject: [PATCH] fix(flex): respect DesktopOnly and MobileOnly components

---
 quartz/components/Flex.tsx |  6 +++++-
 quartz/styles/base.scss    | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/quartz/components/Flex.tsx b/quartz/components/Flex.tsx
index 1cf151e84..a2865e70c 100644
--- a/quartz/components/Flex.tsx
+++ b/quartz/components/Flex.tsx
@@ -21,9 +21,13 @@ export default ((config: FlexConfig) => {
     const direction = config.direction ?? "row"
     const wrap = config.wrap ?? "nowrap"
     const gap = config.gap ?? "1rem"
+    const displayClass = `${props.displayClass ?? ""} flex-component`
 
     return (
-      <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
+      <div
+        class={`${displayClass}`}
+        style={`flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}
+      >
         {config.components.map((c) => {
           const grow = c.grow ? 1 : 0
           const shrink = (c.shrink ?? true) ? 1 : 0
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 60d2d8fa7..59366ccd2 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -123,16 +123,32 @@ a {
   }
 }
 
+.flex-component {
+  display: flex;
+}
+
 .desktop-only {
   display: initial;
+  &.flex-component {
+    display: flex;
+  }
   @media all and ($mobile) {
+    &.flex-component {
+      display: none;
+    }
     display: none;
   }
 }
 
 .mobile-only {
   display: none;
+  &.flex-component {
+    display: none;
+  }
   @media all and ($mobile) {
+    &.flex-component {
+      display: flex;
+    }
     display: initial;
   }
 }