From 6cdaf29247aa49a92d1f65278ba95f2ad6983961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?= <r.hackr@gmail.com>
Date: Wed, 23 Aug 2023 15:20:48 -0400
Subject: [PATCH] TabbedLayout mobile

---
 src/UI/PageLayout.elm      | 4 ++--
 src/css/ui/page-layout.css | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/UI/PageLayout.elm b/src/UI/PageLayout.elm
index 238a0c86..5167cc16 100644
--- a/src/UI/PageLayout.elm
+++ b/src/UI/PageLayout.elm
@@ -366,12 +366,12 @@ view page =
                 -- the header and the TabList
                 [ header [ class "tabbed-layout_header" ]
                     [ div
-                        [ class "page-content" ]
+                        [ class "tabbed-layout_width" ]
                         [ PageTitle.view pageTitle ]
                     ]
                 , div [ class "tabbed-layout_tab-list" ]
                     [ div
-                        [ class "page-content" ]
+                        [ class "tabbed-layout_width" ]
                         [ TabList.view tabList ]
                     ]
                 , PageContent.view_ (viewPageFooter footer) content
diff --git a/src/css/ui/page-layout.css b/src/css/ui/page-layout.css
index 43c7614c..23314868 100644
--- a/src/css/ui/page-layout.css
+++ b/src/css/ui/page-layout.css
@@ -192,6 +192,11 @@
   padding: 3rem 0 1.5rem 0;
 }
 
+.page.tabbed-layout .tabbed-layout_width {
+  width: 52.75rem;
+  margin: auto;
+}
+
 /* @todo :has */
 .page .page-content .page-title .has_icon {
   display: flex;
@@ -432,6 +437,7 @@
   .page.centered-layout .page-content,
   .page.centered-narrow-layout .page-content,
   .page.tabbed-layout .page-content,
+  .page.tabbed-layout .tabbed-layout_width,
   .page.presentation-layout .page-content {
     width: 100%;
     overflow: initial;