Fill horizontal space on medium-sized viewports

This removes the horrible side margins on portrait tablets

app/assets/stylesheets/components/_container.scss

@@ -1,4 +1,8 @@
 .container--main {
   padding-top: map-get($spacers, 3);
   padding-bottom: map-get($spacers, 3);
+  // Sass doesn't know about the safe-area-inset-* env vars and throws a syntax error
+  // We can get around this by using unquote()
+  padding-left: unquote('max(15px, env(safe-area-inset-left))');
+  padding-right: unquote('max(15px, env(safe-area-inset-right))');
 }

app/views/announcement/edit.haml

@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Edit announcement'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = bootstrap_form_for(@announcement, url: { action: 'update' }, method: 'PATCH') do |f|

app/views/announcement/index.haml

@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Announcements'))
-.container.container--main
+.container-lg.container--main
   - @announcements.each do |announcement|
     .card
       .card-body

app/views/announcement/new.haml

@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Add new announcement'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = bootstrap_form_for(@announcement, url: { action: 'create' }) do |f|

app/views/answer/show.haml

@@ -1,4 +1,4 @@
 - provide(:title, answer_title(@answer))
 - provide(:og, answer_opengraph(@answer))
-.container.container--main
+.container-lg.container--main
   = render 'answerbox', a: @answer, display_all: @display_all

app/views/layouts/feed.haml

@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-sm-4.d-none.d-sm-block
       = render 'shared/sidebar'

app/views/layouts/inbox.haml

@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4.order-2.order-sm-1
       = render 'inbox/sidebar', delete_id: @delete_id, disabled: @disabled, inbox_count: @inbox_count

app/views/layouts/moderation.haml

@@ -1,5 +1,5 @@
 = render 'navigation/moderation'
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-sm-4.col-xs-12
       = render 'tabs/moderation'

app/views/layouts/notifications.haml

@@ -1,5 +1,5 @@
 = render 'navigation/notification'
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'tabs/notifications'

app/views/layouts/user/settings.haml

@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'tabs/settings'

app/views/settings/security/recovery_keys.haml

@@ -1,4 +1,4 @@
-.container.container--main
+.container-lg.container--main
   .row.justify-content-center
     .col-md-5.totp-setup__recovery-container
       .card

app/views/static/privacy_policy.haml

@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Privacy Policy'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = raw_markdown_io 'service-docs/en/policy/privacy.md'

app/views/static/terms.haml

@@ -1,5 +1,5 @@
 - provide(:title, generate_title('Terms of Service'))
-.container.container--main
+.container-lg.container--main
   .card
     .card-body
       = raw_markdown_io 'service-docs/en/policy/terms.md'