Redesign issue header

hbs2-git-dashboard/hbs2-git-dashboard-assets/assets/css/custom.css

@@ -55,6 +55,7 @@ header>nav {
   padding-top: var(--pico-block-spacing-vertical);
   padding-bottom: var(--pico-block-spacing-vertical);
   padding-left: var(--pico-block-spacing-horizontal);
+  overflow: auto;
 }
 
 article {
@@ -89,9 +90,6 @@ article {
   color: var(--pico-secondary-hover);
 }
 
-.copyable-text {
-}
-
 .copy-button .icon {
   width: 1.125rem;
   height: 1.125rem;
@@ -110,19 +108,6 @@ article {
   margin-bottom: var(--pico-block-spacing-vertical);
 }
 
-.mb-0 {
-  margin-bottom: 0;
-}
-
-.py-0 {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.text-nowrap {
-  text-wrap: nowrap;
-}
-
 .repo-menu {
   --pico-nav-breadcrumb-divider: '|';
 }
@@ -147,6 +132,93 @@ aside li :where(a,[role=link]):not(:hover) {
   margin-bottom: calc(var(--pico-typography-spacing-vertical) * .25);
 }
 
+.issue-info-card {
+  padding: 0;
+}
+
+.issue-info-card>header {
+  margin: 0;
+}
+
+.issue-info-card>header h5 {
+  color: inherit;
+  margin-bottom: 0;
+}
+
+.issue-info-table tr:hover {
+  background-color: var(--pico-background-color);
+}
+
+.issue-info-table td,
+.issue-info-table th {
+  border-bottom-color: var(--pico-card-border-color);
+}
+
+.issue-info-table tr:last-child>td,
+.issue-info-table tr:last-child>th {
+  border-bottom: none;
+}
+
+.issue-info-table tr:last-child>td:first-child,
+.issue-info-table tr:last-child>th:first-child {
+  border-bottom-left-radius: var(--pico-border-radius);
+}
+
+.issue-info-table tr:last-child>td:last-child,
+.issue-info-table tr:last-child>th:last-child {
+  border-bottom-right-radius: var(--pico-border-radius);
+}
+
+.issue-info-card .issue-id {
+  cursor: pointer;
+  border-bottom: none;
+  color: var(--pico-secondary); 
+}
+
+
+.issue-info-card .issue-id:hover {
+  text-decoration: underline;
+  color: var(--pico-secondary-hover);
+}
+
+/* Tailwind-style classes */
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: var(--pico-spacing);
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.text-secondary {
+  color: var(--pico-secondary);
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 /* fastpok CSS end */
 
 

hbs2-git-dashboard/hbs2-git-dashboard-core/HBS2/Git/Web/Html/Issue.hs

@@ -35,8 +35,8 @@ instance ToHtml (IssueOptionalArg Fixme FixmeAttrName) where
   toHtml (IssueOptionalArg fxm n)  = do
     for_ (fixmeGet n fxm) $ \t -> do
       tr_ do
-        th_ $ strong_ (toHtml $ show $ pretty n)
+        td_ [class_ "whitespace-nowrap"] $ strong_ (toHtml $ show $ pretty n)
-        td_ (toHtml $ show $ pretty t)
+        td_ [class_ "w-full"] (toHtml $ show $ pretty t)
 
   toHtmlRaw  = toHtml
 
@@ -78,7 +78,7 @@ issuePage repo@(RepoLww lww) f = rootPage do
 
       div_ [class_ "content"] $ do
 
-        nav_ [style_ "margin-bottom: 2em;"] do
+        nav_ [class_ "mb-1"] do
 
           div_ do
             small_ do
@@ -87,21 +87,22 @@ issuePage repo@(RepoLww lww) f = rootPage do
                 span_ [class_ "inline-icon-wrapper"] $ svgIcon IconArrowUturnLeft
                 span_ [] "back to issues"
 
-        section_ do
+        article_ [class_ "issue-info-card"] do
-          table_ do
+          header_ do
-            tr_ do
+            h5_ do
-              td_ [colspan_ "2"] do
+              toHtml (coerce @_ @Text $ fixmeTag fxm)
+              " "
+              span_ [class_ "font-normal"] do
                 let fkKey = coerce @_ @Text $ fixmeKey fxm
-                strong_ [style_ "margin-right: 1ch;"] $ toHtml (coerce @_ @Text $ fixmeTag fxm)
+                span_ [ class_ "issue-id secondary"
-                span_ [ style_ "margin-right: 1ch;"
+                      , data_ "tooltip" "Copy"
-                      -- FIXME: make-underlined-on-hover
-                      --  $assigned fastpok
-                      , class_ "copyable-text"
                       , onClickCopyText $ Text.take 10 fkKey
                       ] $ toHtml (H $ fixmeKey fxm)
                 " "
-                span_ [] $ toHtml (coerce @_ @Text $ fixmeTitle fxm)
+                toHtml (coerce @_ @Text $ fixmeTitle fxm)
 
+          div_ [class_ "overflow-x-auto"] $ table_ [class_ "issue-info-table mb-0"] do
+           
             toHtml (issueOptionalArg fxm "workflow")
             toHtml (issueOptionalArg fxm "class")
             toHtml (issueOptionalArg fxm "assigned")

hbs2-git-dashboard/hbs2-git-dashboard-core/HBS2/Git/Web/Html/Root.hs

@@ -48,6 +48,8 @@ onClickCopyText :: Text -> Attribute
 onClickCopyText s =
   hyper_ [qc|on click writeText('{s}') into the navigator's clipboard
 set @data-tooltip to 'Copied!'
+wait 2s
+set @data-tooltip to 'Copy'
 |]
 
 
@@ -131,7 +133,7 @@ dashboardRootPage = rootPage do
 
               div_ do
 
-                div_ [class_ "text-nowrap"] do
+                div_ [class_ "whitespace-nowrap"] do
                   small_ $ "Updated " <> toHtml updated
 
                 when locked do