From 041ac0c28e1a3ac4c7df2a6d64f152bf23cbb963 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Mon, 24 Nov 2025 11:52:56 +0100
Subject: [PATCH] Add conditional stylesheets for mobile apps

---
 app/assets/stylesheets/android/_global.css    |  3 ++
 app/assets/stylesheets/ios/_global.css        |  3 ++
 app/assets/stylesheets/mobile_app/_global.css |  6 +++
 app/assets/stylesheets/{ => web}/_global.css  |  2 +-
 .../stylesheets/{ => web}/animation.css       |  0
 .../stylesheets/{ => web}/autoresize.css      |  0
 app/assets/stylesheets/{ => web}/avatars.css  |  0
 app/assets/stylesheets/{ => web}/bar.css      |  0
 app/assets/stylesheets/{ => web}/base.css     |  0
 app/assets/stylesheets/{ => web}/bubble.css   |  0
 app/assets/stylesheets/{ => web}/buttons.css  |  0
 .../stylesheets/{ => web}/card-columns.css    |  0
 .../stylesheets/{ => web}/card-perma.css      |  0
 app/assets/stylesheets/{ => web}/cards.css    |  0
 .../stylesheets/{ => web}/circled-text.css    |  0
 .../stylesheets/{ => web}/color-picker.css    |  0
 app/assets/stylesheets/{ => web}/comments.css |  0
 app/assets/stylesheets/{ => web}/dialog.css   |  0
 app/assets/stylesheets/{ => web}/dividers.css |  0
 .../stylesheets/{ => web}/drag_and_drop.css   |  0
 app/assets/stylesheets/{ => web}/events.css   |  1 +
 app/assets/stylesheets/{ => web}/filters.css  |  0
 app/assets/stylesheets/{ => web}/flash.css    |  0
 .../stylesheets/{ => web}/golden-effect.css   |  0
 app/assets/stylesheets/{ => web}/header.css   | 11 +++--
 app/assets/stylesheets/{ => web}/icons.css    |  0
 app/assets/stylesheets/{ => web}/inputs.css   |  0
 app/assets/stylesheets/{ => web}/knobs.css    |  0
 app/assets/stylesheets/{ => web}/layout.css   |  0
 app/assets/stylesheets/{ => web}/lexxy.css    |  0
 app/assets/stylesheets/{ => web}/lightbox.css |  0
 app/assets/stylesheets/{ => web}/markdown.css |  0
 app/assets/stylesheets/{ => web}/nav.css      |  0
 .../stylesheets/{ => web}/notifications.css   |  0
 .../stylesheets/{ => web}/pagination.css      |  0
 app/assets/stylesheets/{ => web}/panels.css   |  0
 app/assets/stylesheets/{ => web}/popup.css    |  0
 app/assets/stylesheets/{ => web}/print.css    |  0
 .../stylesheets/{ => web}/profile-layout.css  |  0
 app/assets/stylesheets/{ => web}/pwa.css      |  0
 app/assets/stylesheets/{ => web}/qr-codes.css |  0
 .../stylesheets/{ => web}/reactions.css       |  0
 app/assets/stylesheets/{ => web}/reset.css    |  0
 .../{ => web}/rich-text-content.css           |  0
 app/assets/stylesheets/{ => web}/search.css   |  0
 .../stylesheets/{ => web}/separators.css      |  0
 app/assets/stylesheets/{ => web}/settings.css |  0
 app/assets/stylesheets/{ => web}/spinners.css |  0
 app/assets/stylesheets/{ => web}/steps.css    |  0
 app/assets/stylesheets/{ => web}/syntax.css   |  0
 app/assets/stylesheets/{ => web}/tags.css     |  0
 app/assets/stylesheets/{ => web}/toggles.css  |  0
 app/assets/stylesheets/{ => web}/tooltips.css |  0
 app/assets/stylesheets/{ => web}/trays.css    |  0
 app/assets/stylesheets/{ => web}/user.css     |  0
 .../stylesheets/{ => web}/utilities.css       |  0
 app/helpers/application_helper.rb             |  4 ++
 app/models/application_platform.rb            | 40 +++++++++++++++++++
 app/views/layouts/shared/_head.html.erb       |  2 +-
 59 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/stylesheets/android/_global.css
 create mode 100644 app/assets/stylesheets/ios/_global.css
 create mode 100644 app/assets/stylesheets/mobile_app/_global.css
 rename app/assets/stylesheets/{ => web}/_global.css (99%)
 rename app/assets/stylesheets/{ => web}/animation.css (100%)
 rename app/assets/stylesheets/{ => web}/autoresize.css (100%)
 rename app/assets/stylesheets/{ => web}/avatars.css (100%)
 rename app/assets/stylesheets/{ => web}/bar.css (100%)
 rename app/assets/stylesheets/{ => web}/base.css (100%)
 rename app/assets/stylesheets/{ => web}/bubble.css (100%)
 rename app/assets/stylesheets/{ => web}/buttons.css (100%)
 rename app/assets/stylesheets/{ => web}/card-columns.css (100%)
 rename app/assets/stylesheets/{ => web}/card-perma.css (100%)
 rename app/assets/stylesheets/{ => web}/cards.css (100%)
 rename app/assets/stylesheets/{ => web}/circled-text.css (100%)
 rename app/assets/stylesheets/{ => web}/color-picker.css (100%)
 rename app/assets/stylesheets/{ => web}/comments.css (100%)
 rename app/assets/stylesheets/{ => web}/dialog.css (100%)
 rename app/assets/stylesheets/{ => web}/dividers.css (100%)
 rename app/assets/stylesheets/{ => web}/drag_and_drop.css (100%)
 rename app/assets/stylesheets/{ => web}/events.css (99%)
 rename app/assets/stylesheets/{ => web}/filters.css (100%)
 rename app/assets/stylesheets/{ => web}/flash.css (100%)
 rename app/assets/stylesheets/{ => web}/golden-effect.css (100%)
 rename app/assets/stylesheets/{ => web}/header.css (95%)
 rename app/assets/stylesheets/{ => web}/icons.css (100%)
 rename app/assets/stylesheets/{ => web}/inputs.css (100%)
 rename app/assets/stylesheets/{ => web}/knobs.css (100%)
 rename app/assets/stylesheets/{ => web}/layout.css (100%)
 rename app/assets/stylesheets/{ => web}/lexxy.css (100%)
 rename app/assets/stylesheets/{ => web}/lightbox.css (100%)
 rename app/assets/stylesheets/{ => web}/markdown.css (100%)
 rename app/assets/stylesheets/{ => web}/nav.css (100%)
 rename app/assets/stylesheets/{ => web}/notifications.css (100%)
 rename app/assets/stylesheets/{ => web}/pagination.css (100%)
 rename app/assets/stylesheets/{ => web}/panels.css (100%)
 rename app/assets/stylesheets/{ => web}/popup.css (100%)
 rename app/assets/stylesheets/{ => web}/print.css (100%)
 rename app/assets/stylesheets/{ => web}/profile-layout.css (100%)
 rename app/assets/stylesheets/{ => web}/pwa.css (100%)
 rename app/assets/stylesheets/{ => web}/qr-codes.css (100%)
 rename app/assets/stylesheets/{ => web}/reactions.css (100%)
 rename app/assets/stylesheets/{ => web}/reset.css (100%)
 rename app/assets/stylesheets/{ => web}/rich-text-content.css (100%)
 rename app/assets/stylesheets/{ => web}/search.css (100%)
 rename app/assets/stylesheets/{ => web}/separators.css (100%)
 rename app/assets/stylesheets/{ => web}/settings.css (100%)
 rename app/assets/stylesheets/{ => web}/spinners.css (100%)
 rename app/assets/stylesheets/{ => web}/steps.css (100%)
 rename app/assets/stylesheets/{ => web}/syntax.css (100%)
 rename app/assets/stylesheets/{ => web}/tags.css (100%)
 rename app/assets/stylesheets/{ => web}/toggles.css (100%)
 rename app/assets/stylesheets/{ => web}/tooltips.css (100%)
 rename app/assets/stylesheets/{ => web}/trays.css (100%)
 rename app/assets/stylesheets/{ => web}/user.css (100%)
 rename app/assets/stylesheets/{ => web}/utilities.css (100%)

diff --git a/app/assets/stylesheets/android/_global.css b/app/assets/stylesheets/android/_global.css
new file mode 100644
index 000000000..247ac7ba0
--- /dev/null
+++ b/app/assets/stylesheets/android/_global.css
@@ -0,0 +1,3 @@
+@layer android {
+    /* Android app only styles go here */
+}
diff --git a/app/assets/stylesheets/ios/_global.css b/app/assets/stylesheets/ios/_global.css
new file mode 100644
index 000000000..be4178b36
--- /dev/null
+++ b/app/assets/stylesheets/ios/_global.css
@@ -0,0 +1,3 @@
+@layer ios {
+    /* iOS app only styles go here */
+}
diff --git a/app/assets/stylesheets/mobile_app/_global.css b/app/assets/stylesheets/mobile_app/_global.css
new file mode 100644
index 000000000..eae613d38
--- /dev/null
+++ b/app/assets/stylesheets/mobile_app/_global.css
@@ -0,0 +1,6 @@
+@layer mobile_app {
+    /* Mobile app only styles go here */
+    * {
+        color: red !important;
+    }
+}
diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/web/_global.css
similarity index 99%
rename from app/assets/stylesheets/_global.css
rename to app/assets/stylesheets/web/_global.css
index 9c0b30f0f..4f017523c 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/web/_global.css
@@ -1,4 +1,4 @@
-@layer reset, base, components, modules, utilities;
+@layer reset, base, components, modules, utilities, mobile_app, android, ios;
 
 :root {
   /* Spacing */
diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/web/animation.css
similarity index 100%
rename from app/assets/stylesheets/animation.css
rename to app/assets/stylesheets/web/animation.css
diff --git a/app/assets/stylesheets/autoresize.css b/app/assets/stylesheets/web/autoresize.css
similarity index 100%
rename from app/assets/stylesheets/autoresize.css
rename to app/assets/stylesheets/web/autoresize.css
diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/web/avatars.css
similarity index 100%
rename from app/assets/stylesheets/avatars.css
rename to app/assets/stylesheets/web/avatars.css
diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/web/bar.css
similarity index 100%
rename from app/assets/stylesheets/bar.css
rename to app/assets/stylesheets/web/bar.css
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/web/base.css
similarity index 100%
rename from app/assets/stylesheets/base.css
rename to app/assets/stylesheets/web/base.css
diff --git a/app/assets/stylesheets/bubble.css b/app/assets/stylesheets/web/bubble.css
similarity index 100%
rename from app/assets/stylesheets/bubble.css
rename to app/assets/stylesheets/web/bubble.css
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/web/buttons.css
similarity index 100%
rename from app/assets/stylesheets/buttons.css
rename to app/assets/stylesheets/web/buttons.css
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/web/card-columns.css
similarity index 100%
rename from app/assets/stylesheets/card-columns.css
rename to app/assets/stylesheets/web/card-columns.css
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/web/card-perma.css
similarity index 100%
rename from app/assets/stylesheets/card-perma.css
rename to app/assets/stylesheets/web/card-perma.css
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/web/cards.css
similarity index 100%
rename from app/assets/stylesheets/cards.css
rename to app/assets/stylesheets/web/cards.css
diff --git a/app/assets/stylesheets/circled-text.css b/app/assets/stylesheets/web/circled-text.css
similarity index 100%
rename from app/assets/stylesheets/circled-text.css
rename to app/assets/stylesheets/web/circled-text.css
diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/web/color-picker.css
similarity index 100%
rename from app/assets/stylesheets/color-picker.css
rename to app/assets/stylesheets/web/color-picker.css
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/web/comments.css
similarity index 100%
rename from app/assets/stylesheets/comments.css
rename to app/assets/stylesheets/web/comments.css
diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/web/dialog.css
similarity index 100%
rename from app/assets/stylesheets/dialog.css
rename to app/assets/stylesheets/web/dialog.css
diff --git a/app/assets/stylesheets/dividers.css b/app/assets/stylesheets/web/dividers.css
similarity index 100%
rename from app/assets/stylesheets/dividers.css
rename to app/assets/stylesheets/web/dividers.css
diff --git a/app/assets/stylesheets/drag_and_drop.css b/app/assets/stylesheets/web/drag_and_drop.css
similarity index 100%
rename from app/assets/stylesheets/drag_and_drop.css
rename to app/assets/stylesheets/web/drag_and_drop.css
diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/web/events.css
similarity index 99%
rename from app/assets/stylesheets/events.css
rename to app/assets/stylesheets/web/events.css
index 1dbdf0997..c6bd0ff2a 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/web/events.css
@@ -221,6 +221,7 @@
     background-color: var(--color-canvas);
     grid-row-start: 1;
     inset-block-start: calc(var(--block-space) * -1);
+    margin-inline: calc(var(--main-padding) * -1);
     margin-block-end: var(--events-gap);
     padding-block: calc(var(--events-gap) * 3) var(--events-gap);
     position: sticky;
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/web/filters.css
similarity index 100%
rename from app/assets/stylesheets/filters.css
rename to app/assets/stylesheets/web/filters.css
diff --git a/app/assets/stylesheets/flash.css b/app/assets/stylesheets/web/flash.css
similarity index 100%
rename from app/assets/stylesheets/flash.css
rename to app/assets/stylesheets/web/flash.css
diff --git a/app/assets/stylesheets/golden-effect.css b/app/assets/stylesheets/web/golden-effect.css
similarity index 100%
rename from app/assets/stylesheets/golden-effect.css
rename to app/assets/stylesheets/web/golden-effect.css
diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/web/header.css
similarity index 95%
rename from app/assets/stylesheets/header.css
rename to app/assets/stylesheets/web/header.css
index 59d94a0f3..8ef1b4094 100644
--- a/app/assets/stylesheets/header.css
+++ b/app/assets/stylesheets/web/header.css
@@ -39,6 +39,7 @@
 
   .header__actions {
     display: flex;
+    align-items: center;
     font-size: var(--text-x-small);
     gap: var(--header-gap);
     inline-size: var(--header-actions-width);
@@ -117,17 +118,15 @@
   /* Optional class to stack header actions on small screens
   /* ------------------------------------------------------------------------ */
 
-  /* .header--mobile-actions-stack {
+  .header--mobile-actions-stack {
     @media (max-width: 639px) {
-      grid-template-columns: 1fr 1fr;
       grid-template-areas:
-        "menu menu"
-        "actions-start actions-end"
-        "title title";
+        "actions-start menu actions-end"
+        "title title title";
 
       .header__title {
         margin-block-start: 0.25rem;
       }
     }
-  } */
+  }
 }
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/web/icons.css
similarity index 100%
rename from app/assets/stylesheets/icons.css
rename to app/assets/stylesheets/web/icons.css
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/web/inputs.css
similarity index 100%
rename from app/assets/stylesheets/inputs.css
rename to app/assets/stylesheets/web/inputs.css
diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/web/knobs.css
similarity index 100%
rename from app/assets/stylesheets/knobs.css
rename to app/assets/stylesheets/web/knobs.css
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/web/layout.css
similarity index 100%
rename from app/assets/stylesheets/layout.css
rename to app/assets/stylesheets/web/layout.css
diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/web/lexxy.css
similarity index 100%
rename from app/assets/stylesheets/lexxy.css
rename to app/assets/stylesheets/web/lexxy.css
diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/web/lightbox.css
similarity index 100%
rename from app/assets/stylesheets/lightbox.css
rename to app/assets/stylesheets/web/lightbox.css
diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/web/markdown.css
similarity index 100%
rename from app/assets/stylesheets/markdown.css
rename to app/assets/stylesheets/web/markdown.css
diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/web/nav.css
similarity index 100%
rename from app/assets/stylesheets/nav.css
rename to app/assets/stylesheets/web/nav.css
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/web/notifications.css
similarity index 100%
rename from app/assets/stylesheets/notifications.css
rename to app/assets/stylesheets/web/notifications.css
diff --git a/app/assets/stylesheets/pagination.css b/app/assets/stylesheets/web/pagination.css
similarity index 100%
rename from app/assets/stylesheets/pagination.css
rename to app/assets/stylesheets/web/pagination.css
diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/web/panels.css
similarity index 100%
rename from app/assets/stylesheets/panels.css
rename to app/assets/stylesheets/web/panels.css
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/web/popup.css
similarity index 100%
rename from app/assets/stylesheets/popup.css
rename to app/assets/stylesheets/web/popup.css
diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/web/print.css
similarity index 100%
rename from app/assets/stylesheets/print.css
rename to app/assets/stylesheets/web/print.css
diff --git a/app/assets/stylesheets/profile-layout.css b/app/assets/stylesheets/web/profile-layout.css
similarity index 100%
rename from app/assets/stylesheets/profile-layout.css
rename to app/assets/stylesheets/web/profile-layout.css
diff --git a/app/assets/stylesheets/pwa.css b/app/assets/stylesheets/web/pwa.css
similarity index 100%
rename from app/assets/stylesheets/pwa.css
rename to app/assets/stylesheets/web/pwa.css
diff --git a/app/assets/stylesheets/qr-codes.css b/app/assets/stylesheets/web/qr-codes.css
similarity index 100%
rename from app/assets/stylesheets/qr-codes.css
rename to app/assets/stylesheets/web/qr-codes.css
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/web/reactions.css
similarity index 100%
rename from app/assets/stylesheets/reactions.css
rename to app/assets/stylesheets/web/reactions.css
diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/web/reset.css
similarity index 100%
rename from app/assets/stylesheets/reset.css
rename to app/assets/stylesheets/web/reset.css
diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/web/rich-text-content.css
similarity index 100%
rename from app/assets/stylesheets/rich-text-content.css
rename to app/assets/stylesheets/web/rich-text-content.css
diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/web/search.css
similarity index 100%
rename from app/assets/stylesheets/search.css
rename to app/assets/stylesheets/web/search.css
diff --git a/app/assets/stylesheets/separators.css b/app/assets/stylesheets/web/separators.css
similarity index 100%
rename from app/assets/stylesheets/separators.css
rename to app/assets/stylesheets/web/separators.css
diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/web/settings.css
similarity index 100%
rename from app/assets/stylesheets/settings.css
rename to app/assets/stylesheets/web/settings.css
diff --git a/app/assets/stylesheets/spinners.css b/app/assets/stylesheets/web/spinners.css
similarity index 100%
rename from app/assets/stylesheets/spinners.css
rename to app/assets/stylesheets/web/spinners.css
diff --git a/app/assets/stylesheets/steps.css b/app/assets/stylesheets/web/steps.css
similarity index 100%
rename from app/assets/stylesheets/steps.css
rename to app/assets/stylesheets/web/steps.css
diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/web/syntax.css
similarity index 100%
rename from app/assets/stylesheets/syntax.css
rename to app/assets/stylesheets/web/syntax.css
diff --git a/app/assets/stylesheets/tags.css b/app/assets/stylesheets/web/tags.css
similarity index 100%
rename from app/assets/stylesheets/tags.css
rename to app/assets/stylesheets/web/tags.css
diff --git a/app/assets/stylesheets/toggles.css b/app/assets/stylesheets/web/toggles.css
similarity index 100%
rename from app/assets/stylesheets/toggles.css
rename to app/assets/stylesheets/web/toggles.css
diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/web/tooltips.css
similarity index 100%
rename from app/assets/stylesheets/tooltips.css
rename to app/assets/stylesheets/web/tooltips.css
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/web/trays.css
similarity index 100%
rename from app/assets/stylesheets/trays.css
rename to app/assets/stylesheets/web/trays.css
diff --git a/app/assets/stylesheets/user.css b/app/assets/stylesheets/web/user.css
similarity index 100%
rename from app/assets/stylesheets/user.css
rename to app/assets/stylesheets/web/user.css
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/web/utilities.css
similarity index 100%
rename from app/assets/stylesheets/utilities.css
rename to app/assets/stylesheets/web/utilities.css
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index cefd6fd37..0897e5b56 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,4 +1,8 @@
 module ApplicationHelper
+  def stylesheet_link_tags
+    stylesheet_link_tag *platform.stylesheet_paths, "data-turbo-track": "reload"
+  end
+
   def page_title_tag
     account_name = if Current.account && Current.session&.identity&.users&.many?
       Current.account&.name
diff --git a/app/models/application_platform.rb b/app/models/application_platform.rb
index 500f4adc6..59d7c9f78 100644
--- a/app/models/application_platform.rb
+++ b/app/models/application_platform.rb
@@ -1,4 +1,6 @@
 class ApplicationPlatform < PlatformAgent
+  SCOPED_STYLESHEET_PATHS = {}
+
   def ios?
     match? /iPhone|iPad/
   end
@@ -39,6 +41,18 @@ class ApplicationPlatform < PlatformAgent
     operating_system == "Windows"
   end
 
+  def ios_app?
+    match? /Fizzy iOS/
+  end
+
+  def android_app?
+    match? /Fizzy Android/
+  end
+
+  def mobile_app?
+    ios_app? || android_app?
+  end
+
   def operating_system
     case user_agent.platform
     when /Android/   then "Android"
@@ -51,4 +65,30 @@ class ApplicationPlatform < PlatformAgent
       os =~ /Linux/ ? "Linux" : os
     end
   end
+
+  def stylesheet_asset_name
+    case
+    when android_app? then "android"
+    when ios_app?     then "ios"
+    else                   "desktop"
+    end
+  end
+
+  def stylesheet_paths
+    scoped_stylesheet_paths("web") +
+    (mobile_app? ? scoped_stylesheet_paths("mobile_app") : []) +
+    scoped_stylesheet_paths(stylesheet_asset_name)
+  end
+
+  def scoped_stylesheet_paths(scope = css_asset_name)
+    # Allow new stylesheets to be added in dev/test without restarting server
+    SCOPED_STYLESHEET_PATHS.clear if Rails.env.local?
+
+    SCOPED_STYLESHEET_PATHS[scope] ||=
+      Rails.root.join("app/assets/stylesheets").then do |stylesheet_root|
+        stylesheet_root.glob("#{scope}/**/*.css").collect do |path|
+          path.to_s.remove(stylesheet_root.to_s + "/", ".css")
+        end
+      end
+  end
 end
diff --git a/app/views/layouts/shared/_head.html.erb b/app/views/layouts/shared/_head.html.erb
index 550b61eaa..d32d21cb9 100644
--- a/app/views/layouts/shared/_head.html.erb
+++ b/app/views/layouts/shared/_head.html.erb
@@ -15,7 +15,7 @@
 
   <% turbo_refreshes_with method: :morph, scroll: :preserve %>
 
-  <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+  <%= stylesheet_link_tags %>
   <%= javascript_importmap_tags %>
 
   <%= tenanted_action_cable_meta_tag %>