TabbedLayout css

unisonweb · Aug 23, 2023 · 4b8ab65 · 4b8ab65
1 parent 38ecb82
commit 4b8ab65
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/UI/PageLayout.elm b/src/UI/PageLayout.elm
@@ -362,8 +362,18 @@ view page =
  [ class "page tabbed-layout"
  , bgClassName backgroundColor
  ]
- [ header [ class "tabbed-layout_header" ] [ PageTitle.view pageTitle ]
- , div [ class "tabbed-layout_tab-list" ] [ TabList.view tabList ]
+ -- This is using the .page-content class to narrow the width of
+ -- the header and the TabList
+ [ header [ class "tabbed-layout_header" ]
+ [ div
+ [ class "page-content" ]
+ [ PageTitle.view pageTitle ]
+ ]
+ , div [ class "tabbed-layout_tab-list" ]
+ [ div
+ [ class "page-content" ]
+ [ TabList.view tabList ]
+ ]
  , PageContent.view_ (viewPageFooter footer) content
  ]
 

diff --git a/src/css/ui/page-layout.css b/src/css/ui/page-layout.css
@@ -55,10 +55,12 @@
 
 .page.tabbed-layout .tabbed-layout_header {
  grid-area: tabbed-layout_header;
+ background: var(--u-color_background_subdued);
 }
 
 .page.tabbed-layout .tabbed-layout_tab-list {
  grid-area: tabbed-layout_tab-list;
+ box-shadow: inset 0 -2px 0 -1px var(--c-color_tabs_border);
 }
 
 .page.presentation-layout {