Hide h-scrollbar on tabs (#54)

Author: Madeline Trotter

docs/Examples/Tab.example.purs

@@ -26,30 +26,35 @@ docs = flip element {} $ withRouter $ toReactComponent identity component { rend
       column_
         [ h2_ "Demo 1"
         , example $
-            tabs
-              { currentLocation: URL $ "#" <> props.location.pathname <> props.location.search <> props.location.hash
-              , useHash: true
-              , navigate: Just \url ->
-                  let
-                    parts = urlParts url
-                    newUrl = parts.path <> parts.query <> parts.hash.path <> parts.hash.query
-                    newUrlNoHash = fromMaybe "" $ flip index 1 $ split (Pattern "#") newUrl
-                  in
-                    runEffectFn1 props.history.push $ URL $ newUrlNoHash
-              , queryKey: TabKey "demo1"
-              , style: R.css {}
-              , tabStyle: R.css {}
-              , selectedTabStyle: R.css {}
-              , tabs: 1 .. 6 <#> \i ->
-                  let
-                    label = "Tab with a long title " <> show i
-                  in
-                    { content: \_ -> empty
-                    , id: TabId (toLower label)
-                    , label
-                    , count: (7*(i - 1) * (i - 1) `mod` 4) * 7 <$ guard (i `mod` 3 /= 1)
-                    , testId: Nothing
-                    }
+            R.div
+              { style: R.css { maxWidth: "800px" }
+              , children:
+                  [ tabs
+                      { currentLocation: URL $ "#" <> props.location.pathname <> props.location.search <> props.location.hash
+                      , useHash: true
+                      , navigate: Just \url ->
+                          let
+                            parts = urlParts url
+                            newUrl = parts.path <> parts.query <> parts.hash.path <> parts.hash.query
+                            newUrlNoHash = fromMaybe "" $ flip index 1 $ split (Pattern "#") newUrl
+                          in
+                            runEffectFn1 props.history.push $ URL $ newUrlNoHash
+                      , queryKey: TabKey "demo1"
+                      , style: R.css {}
+                      , tabStyle: R.css {}
+                      , selectedTabStyle: R.css {}
+                      , tabs: 1 .. 10 <#> \i ->
+                          let
+                            label = "Tab with a long title " <> show i
+                          in
+                            { content: \_ -> empty
+                            , id: TabId (toLower label)
+                            , label
+                            , count: (7*(i - 1) * (i - 1) `mod` 4) * 7 <$ guard (i `mod` 3 /= 1)
+                            , testId: Nothing
+                            }
+                      }
+                  ]
               }
 
         , h2_ "Demo 2"

src/Lumi/Components/Layouts/Tabs.purs

@@ -6,7 +6,7 @@ import Data.Maybe (Maybe(..))
 import Data.NonEmpty (NonEmpty, oneOf)
 import Effect (Effect)
 import Lumi.Components.Tab (TabId, TabKey)
-import Lumi.Components.Tab as Tabs
+import Lumi.Components.Tab as Tab
 import React.Basic (Component, JSX, createComponent, makeStateless)
 import React.Basic.DOM as R
 import Web.HTML.History (URL)
@@ -31,7 +31,7 @@ tabLayout :: TabLayoutProps -> JSX
 tabLayout = makeStateless component render
   where
     render { currentLocation, navigate, queryKey, tabs, useHash } =
-      Tabs.tabs
+      Tab.tabs
         { style: R.css { "paddingLeft": "24px" }
         , tabStyle: R.css {}
         , selectedTabStyle: R.css {}

src/Lumi/Components/Tab.purs

@@ -218,7 +218,7 @@ styles = jss
               { flex: "0 0 auto"
               , display: "flex"
               , alignItems: "center"
-              , fontSize: "14px"
+              , fontSize: "14px "
               , cursor: "pointer"
               , whiteSpace: "nowrap"
               , touchAction: "manipulation"
@@ -261,6 +261,13 @@ styles = jss
 
           , "& > lumi-tab:not(:first-child)": { marginLeft: "22px" }
           , "&[data-variant=\"full\"] lumi-tab": { marginLeft: "22px" }
+
+          -- hide the horizontal scrollbar, it overlaps the tab content
+          , "&::-webkit-scrollbar":
+              { height: "0 !important"
+              }
+          , scrollbarWidth: "none"
+          , "MsOverflowStyle": "none"
           }
 
       , "lumi-tab-content":