Add iOS platform-specific styles


      Gemfile

diff --git a/Gemfile b/Gemfile
index c7686f4..9ce4ff9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -25,6 +25,7 @@ gem 'jbuilder', '~> 2.7'
 
 # Use Active Storage variant
 gem 'image_processing', '~> 1.2'
+gem 'platform_agent'
 
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.2', require: false


      Gemfile.lock

diff --git a/Gemfile.lock b/Gemfile.lock
index 70159c3..2f87904 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -161,6 +161,9 @@ GEM
     nokogiri (1.10.10)
       mini_portile2 (~> 2.4.0)
     pg (1.2.3)
+    platform_agent (1.0.1)
+      activesupport (>= 5.2.0)
+      useragent (~> 0.16.3)
     public_suffix (4.0.6)
     puma (4.3.6)
       nio4r (~> 2.0)
@@ -214,6 +217,7 @@ GEM
     turbolinks-source (5.2.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
+    useragent (0.16.10)
     webdrivers (4.4.1)
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
@@ -238,6 +242,7 @@ DEPENDENCIES
   jbuilder (~> 2.7)
   listen (~> 3.2)
   pg (>= 0.18, < 2.0)
+  platform_agent
   puma (~> 4.1)
   rails!
   sass-rails (>= 6)


      app/controllers/application_controller.rb

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 09705d1..3561548 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -1,2 +1,9 @@
 class ApplicationController < ActionController::Base
+  before_action { request.variant = :ios if platform.ios_app? }
+
+  private
+
+  helper_method def platform
+    @platform ||= ApplicationPlatform.new(request.user_agent)
+  end
 end


      app/javascript/packs/application.css

diff --git a/app/javascript/packs/application.css b/app/javascript/packs/application.css
index d46d9bc..00153b3 100644
--- a/app/javascript/packs/application.css
+++ b/app/javascript/packs/application.css
@@ -4,6 +4,15 @@
 
 :root {
   --header-height: 0px;
+  --safe-area-inset-top: env(safe-area-inset-top);
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+[data-bridge-platform~="ios"] {
+  --header-height: var(--safe-area-inset-top);
 }
 
 .top-offset {


      app/platforms/application_platform.rb

diff --git a/app/platforms/application_platform.rb b/app/platforms/application_platform.rb
new file mode 100644
index 0000000..7198600
--- /dev/null
+++ b/app/platforms/application_platform.rb
@@ -0,0 +1,9 @@
+class ApplicationPlatform < PlatformAgent
+  def ios_app?
+    match? /RecItRalph iOS/
+  end
+
+  def bridge_name
+    :ios if ios_app?
+  end
+end


      app/views/application/_header.html+ios.erb

diff --git a/app/views/application/_header.html+ios.erb b/app/views/application/_header.html+ios.erb
new file mode 100644
index 0000000..e69de29


      app/views/layouts/application.html.erb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 26f878d..904009d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1<%= ", viewport-fit=cover" if platform.ios_app? %>">
     <title><%= yield(:document_title).presence || "Rec-it-Ralph" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
@@ -16,7 +16,7 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
-  <body class="bg-cream-lighter flex flex-col items-stretch min-h-screen">
+  <body class="bg-cream-lighter flex flex-col items-stretch min-h-screen" data-bridge-platform="<%= platform.bridge_name %>">
     <%= render "header" %>
 
     <main class="flex flex-col md:flex-row relative h-screen-minus-header">