Spent way too much time making the blue navbar full-width on iPhone X

app/assets/stylesheets/application.scss

@@ -2,11 +2,21 @@ $enable-gradients: true;
 @import "bootstrap";
 @import "partials/animation";
 
+@mixin padding-safe($direction) {
+  padding-#{$direction}: env(safe-area-inset-#{$direction})
+}
+
 nav {
   $nav-opacity: 0.5;
   $nav-begin-color: rgba(38, 143, 255, $nav-opacity);
   $nav-end-color: rgba(0, 123, 255, $nav-opacity);
   background: $nav-end-color linear-gradient(180deg, $nav-begin-color, $nav-end-color) repeat-x;
+
+  .region-label {
+    padding-left: 10px;
+    // Hack to avoid using sass max function and instead pass max through to css
+    padding-left: m#{a}x(10px, env(safe-area-inset-left));
+  }
 }
 
 #forecast-table {
@@ -51,8 +61,18 @@ nav {
   margin-left: 10px;
 }
 
+.subregion-container {
+  margin-top: 44px;
+}
+
+.safe-padding {
+  @include padding-safe(left);
+  @include padding-safe(right);
+}
+
 .spot-header {
   $opacity: 0.65;
+  padding-left: 5px;
 
   &:first-child {
     margin-top: 5px
@@ -63,7 +83,6 @@ nav {
   }
 
   a {
-    margin-left: 18px;
     opacity: $opacity;
     color: inherit;
 
@@ -73,6 +92,10 @@ nav {
     }
   }
 
+  .icon {
+    margin-left: 18px;
+  }
+
   img {
     height: 26px;
     vertical-align: baseline;

app/helpers/application_helper.rb

@@ -11,11 +11,11 @@ def display_number(value)
   end
 
   def map_link(target)
-    link_to image_tag('map.svg', alt: 'Map Icon'), target, target: 'gmap', title: 'Google Map'
+    link_to image_tag('map.svg', alt: 'Map Icon'), target, target: 'gmap', title: 'Google Map', class: 'icon'
   end
 
   def forecast_link(image_file, service, target, icon_label = nil)
-    link_to target, target: service, title: "#{service} Forecast Page", class: 'text-dark' do
+    link_to target, target: service, title: "#{service} Forecast Page", class: 'icon text-dark' do
       span_tag = tag.span(icon_label, class: 'forecast-icon-label') if icon_label
       image_tag(image_file, alt: "#{service} Logo") + span_tag
     end

app/views/layouts/application.html.slim

@@ -5,7 +5,7 @@
       title= "#{"#{yield(:title)} | " if content_for?(:title)}Meta Surf Forecast"
       = csrf_meta_tags
       = action_cable_meta_tag
-      meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'
+      meta name='viewport' content="width=device-width, initial-scale=1, shrink-to-fit=no#{yield(:meta)}"
       meta property='og:description' content='Pulls data from Surfline, MagicSeaweed & Spitcast APIs to display an aggregated surf forecast.'
       meta property='og:image' content=image_url('wave.jpg')
       link rel='apple-touch-icon' href=image_url('wave.png')

app/views/subregions/show.html.slim

@@ -1,17 +1,18 @@
 - cache @subregion do
   - provide(:title, "#{@subregion.name}, #{@region.name}")
+  - provide(:meta, ', viewport-fit=cover')
 
   nav.navbar.navbar-light.fixed-top
     .row.font-weight-light
-      span.margin-left.text-light Region:
+      span.text-light.region-label Region:
       select.margin-left onchange='window.location = this.value'
         - Region.all.each do |region|
           optgroup label=region.name
             - region.subregions.each do |subregion|
               option value=subregion_path(region, subregion) selected=('selected' if subregion == @subregion) =subregion.name
-  div style='margin-top: 44px'
+  .subregion-container.safe-padding
     - @forecasts.each do |data, forecast|
-      h2.font-weight-light.margin-left.spot-header id=data[:slug]
+      h2.font-weight-light.spot-header id=data[:slug]
         span= link_to data[:name], spot_path(@region, @subregion, data[:slug])
         = map_link(Spot.map_url(data[:lat], data[:lon]))
         = spitcast_link(Spot.spitcast_url(data[:spitcast_slug])) if data[:spitcast_slug]