From b664b5771d1ea88961cba23d4c7fa7191022094b Mon Sep 17 00:00:00 2001
From: eikek <eike.kettner@posteo.de>
Date: Wed, 23 Feb 2022 23:18:58 +0100
Subject: [PATCH] Fixes in dashboard table view

- The first tag was rendered with slightly higher height than the rest
- Columns between first and last are hidden on small screens
- Use `break-all` to break all words if necessary without trying to
  keep whole words
---
 .../webapp/src/main/elm/Comp/BoxQueryView.elm | 32 +++++++++++++++++--
 .../src/main/elm/Comp/ItemColumnView.elm      |  2 +-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/modules/webapp/src/main/elm/Comp/BoxQueryView.elm b/modules/webapp/src/main/elm/Comp/BoxQueryView.elm
index 574a8792..6bce5bf1 100644
--- a/modules/webapp/src/main/elm/Comp/BoxQueryView.elm
+++ b/modules/webapp/src/main/elm/Comp/BoxQueryView.elm
@@ -123,6 +123,12 @@ viewItemHead texts meta =
     let
         ( col1, cols ) =
             getColumns meta
+
+        isSecond n =
+            n == 1
+
+        isNotLast n =
+            n > 1 && n < List.length cols
     in
     if not meta.showHeaders then
         []
@@ -131,7 +137,18 @@ viewItemHead texts meta =
         [ thead []
             [ tr []
                 (List.map texts.itemColumn.header (col1 :: cols)
-                    |> List.map (\n -> th [ class "text-left text-sm" ] [ text n ])
+                    |> List.indexedMap
+                        (\index ->
+                            \n ->
+                                th
+                                    [ class "text-left text-sm"
+                                    , classList
+                                        [ ( "hidden sm:table-cell", isSecond index )
+                                        , ( "hidden md:table-cell", isNotLast index )
+                                        ]
+                                    ]
+                                    [ text n ]
+                        )
                 )
             ]
         ]
@@ -143,12 +160,18 @@ viewItemRow texts settings meta item =
         ( col1, cols ) =
             getColumns meta
 
+        isSecond n =
+            n == 0
+
+        isNotLast n =
+            n > 0 && n < (List.length cols - 1)
+
         render col =
             Comp.ItemColumnView.renderDiv
                 texts.templateCtx
                 settings
                 col
-                [ class "flex flex-row flex-wrap space-x-1 space-y-1" ]
+                [ class "flex flex-row break-all flex-wrap space-x-1" ]
                 item
 
         td1 =
@@ -164,7 +187,10 @@ viewItemRow texts settings meta item =
         tdRem index col =
             td
                 [ class "py-1 px-1"
-                , classList [ ( "hidden md:table-cell", index > 1 ) ]
+                , classList
+                    [ ( "hidden sm:table-cell", isSecond index )
+                    , ( "hidden md:table-cell", isNotLast index )
+                    ]
                 ]
                 [ render col
                 ]
diff --git a/modules/webapp/src/main/elm/Comp/ItemColumnView.elm b/modules/webapp/src/main/elm/Comp/ItemColumnView.elm
index 0c86f296..eeaf3378 100644
--- a/modules/webapp/src/main/elm/Comp/ItemColumnView.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemColumnView.elm
@@ -29,7 +29,7 @@ renderDiv ctx settings col attr item =
                 (List.map
                     (\t ->
                         div
-                            [ class "label text-sm"
+                            [ class "label text-sm mt-1"
                             , class <| Data.UiSettings.tagColorString2 t settings
                             ]
                             [ text t.name ]