Add conditional stylesheets for mobile apps

app/assets/stylesheets/android/_global.css

@@ -0,0 +1,3 @@
+@layer android {
+    /* Android app only styles go here */
+}

app/assets/stylesheets/ios/_global.css

@@ -0,0 +1,3 @@
+@layer ios {
+    /* iOS app only styles go here */
+}

app/assets/stylesheets/mobile_app/_global.css

@@ -0,0 +1,6 @@
+@layer mobile_app {
+    /* Mobile app only styles go here */
+    * {
+        color: red !important;
+    }
+}

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 */

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;

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;
       }
     }
-  } */
+  }
 }

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

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

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 %>