From b48aa917281c7c23f92c490b751f2b68f387277d Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Mon, 02 Jun 2025 16:36:57 +0000
Subject: [PATCH] fix(flex): respect DesktopOnly and MobileOnly components (#1971)

---
 quartz/components/Flex.tsx |    6 +++++-
 1 files changed, 5 insertions(+), 1 deletions(-)

diff --git a/quartz/components/Flex.tsx b/quartz/components/Flex.tsx
index 1cf151e..70d2149 100644
--- a/quartz/components/Flex.tsx
+++ b/quartz/components/Flex.tsx
@@ -1,4 +1,5 @@
 import { concatenateResources } from "../util/resources"
+import { classNames } from "../util/lang"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 type FlexConfig = {
@@ -23,7 +24,10 @@
     const gap = config.gap ?? "1rem"
 
     return (
-      <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
+      <div
+        class={classNames(props.displayClass, "flex-component")}
+        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

--
Gitblit v1.10.0