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

* fix(flex): respect DesktopOnly and MobileOnly components

* Use classNames util function

* fix(ofm): allow wikilink alias to be empty (#1984)

This is in line with Obsidian's behavior.

* fix(style): Katex adding scrollbars on non-overflowing content (#1989)

* feat(i18n): Bahasa Indonesia translations (#1981)

* fix(a11y): increased content-meta text contrast (#1980)

* fix(analytics): streamline posthog script loading and event capturing (#1974)

* css: adjust color blend for search bg

* feat(links): added ofm option to style unresolved or broken links differently (#1992)

* feat: add option to disable broken wikilinks

* fix(style): update hover color for broken links and introduce new class

* feat: add "disableBrokenWikilinks" option to ObsidianFlavoredMarkdown

* chore(deps): replace `chalk` and `rimraf` with builtin functions (#1879)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore(deps): bump the production-dependencies group across 1 directory with 9 updates (#1996)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Node 22 (#1997)

* docs: showcase housekeeping

* docs: fix explorernode references (closes #1985)

* fix: tz-less date parse in local tz instead of utc (closes #1615)

* docs: added note to not forget to add https:// to the plausible-host (for #1337) (#2000)

* docs: added note to not forget to add https:// to the plausible-host (for #1337)

* Update docs/configuration.md

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Updated documentation

---------

Co-authored-by: Nizav <106657905+Ni-zav@users.noreply.github.com>
Co-authored-by: Aswanth <aswanth366@gmail.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
Co-authored-by: Keisuke ANDO <g.kei0429@gmail.com>
Co-authored-by: fl0werpowers <47599466+fl0werpowers@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Sebastian Moser <64004956+c2vi@users.noreply.github.com>
---
 docs/layout-components.md  |  9 +++++++++
 quartz/components/Flex.tsx |  6 +++++-
 quartz/styles/base.scss    | 16 ++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/layout-components.md b/docs/layout-components.md
index 09c2d76..9a0b639 100644
--- a/docs/layout-components.md
+++ b/docs/layout-components.md
@@ -41,6 +41,15 @@ Component.Flex({
 })
 ```
 
+> [!note] Overriding behavior
+> Components inside `Flex` get an additional CSS class `flex-component` that add the `display: flex` property. If you want to override this behavior, you can add a `display` property to the component's CSS class in your custom CSS file.
+>
+> ```scss
+> .flex-component {
+>   display: block; // or any other display type
+> }
+> ```
+
 ## `MobileOnly` Component
 
 The `MobileOnly` component is a wrapper that makes its child component only visible on mobile devices. This is useful for creating responsive layouts where certain components should only appear on smaller screens.
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 @@ export default ((config: FlexConfig) => {
     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
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index f534e37..820b9ab 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -132,16 +132,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;
   }
 }