Use flex instead of grid so scrollbar works as expected on webkit

nonbili · May 14, 2020 · 7544e5f · 7544e5f
1 parent 5081e2a
commit 7544e5f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/App.purs b/src/App.purs
@@ -37,8 +37,7 @@ renderLink state link =
 render :: State -> HTML
 render state =
   HH.div
-  [ class_ "grid h-screen"
-  , style "grid-template-rows: auto 1fr"
+  [ class_ "flex flex-col h-screen"
   ]
   [ HH.form
     [ class_ "bg-blue-200 py-2 px-4"
@@ -59,14 +58,13 @@ render state =
       [ HH.text "Add"]
     ]
   , HH.div
-    [ class_ "grid min-h-0"
-    , style "grid-template-columns: 1fr auto;"
+    [ class_ "flex-1 flex min-h-0"
     ]
     [ HH.div
-      [ class_ "p-4 flex flex-wrap content-start min-w-0 overflow-y-auto"
+      [ class_ "flex-1 p-4 flex flex-wrap content-start min-w-0 overflow-y-auto"
       ] $ map (renderLink state) state.links
     , HH.div
-      [ class_ "border-l h-full min-h-0 pb-8 overflow-y-auto"
+      [ class_ "border-l h-full min-h-0 overflow-y-auto"
       , style "width: 24rem"
       ]
       [ HH.slot _linkPane unit LinkPane.component selectedLinks $

diff --git a/src/Component/LinkPane.purs b/src/Component/LinkPane.purs
@@ -205,7 +205,8 @@ renderTextNoteForm state =
 
 render :: State -> HTML
 render state =
-  HH.div_
+  HH.div
+  [ class_ "pb-8"]
   [ NbH.fromMaybe (Array.head state.props) \link ->
      HH.div_
      [ renderLink state link