testio-tailwind 3.6.0 → 3.8.0

package/src/assets/stylesheets/components/icons.css

@@ -100,6 +100,18 @@
   @apply text-danger;
 }
 
+.icon.blocked {
+  @apply text-blocked;
+}
+
+.icon.pending {
+  @apply text-pending;
+}
+
+.icon.empty {
+  @apply text-chart-empty;
+}
+
 /*///// Status Icons /////*/
 
 .status-icon {

package/src/assets/stylesheets/components/layout.css

@@ -1,5 +1,9 @@
+html, body {
+  @apply h-full;
+}
+
 .app-body {
-  @apply grid h-screen max-h-screen w-full overflow-hidden bg-appbody text-appbody-textcolor;
+  @apply grid h-screen max-h-full w-full overflow-hidden bg-appbody text-appbody-textcolor;
   grid-template-areas:  "header header header"
                         "sidebar test-header test-header"
                         "sidebar main aside"
@@ -34,4 +38,10 @@
   @apply pb-lg;
 }
 
+.main-content.centered {
+  @apply flex justify-center;
+}
 
+.centered-content {
+  @apply relative w-full max-w-centered-content h-fit overflow-hidden;
+}

package/src/assets/stylesheets/components/list_item.css

@@ -71,8 +71,22 @@ a.listitem:hover {
   mask-image: url("/assets/images/icons/arrow-up.svg");
 }
 
+.dark .listitem .collapse-btn:after {
+  @apply w-icon bg-label-color;
+  mask-image: url("/assets/images/icons/triangle-centered-left.svg");
+}
+
+.dark .listitem[open] > .listitem-header .collapse-btn:after {
+  mask-image: url("/assets/images/icons/triangle-centered-down.svg");
+}
+
+.dark .listitem .collapse-btn:hover:after {
+  @apply bg-white;
+}
+
+
 .listitem-badge {
-  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white bg-black dark:bg-gray-700 rounded-l;
+  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white dark:font-bold dark:text-heading-5 dark:leading-none bg-black dark:bg-gray-750 rounded-l;
   grid-area: badge;
 }
 
@@ -142,7 +156,7 @@ a.listitem:hover {
 }
 
 .listitem-card {
-  @apply relative mb-md p-sm bg-appbody rounded last:mb-0;
+  @apply relative mb-md p-sm bg-appbody dark:bg-gray-750 rounded last:mb-0;
 }
 
 .listitem-card img {
@@ -154,7 +168,7 @@ a.listitem:hover {
 }
 
 .listitem-subheadline {
-  @apply mb-xs text-label font-semibold uppercase;
+  @apply mb-xs text-label font-semibold uppercase dark:uppercase dark:text-label-color;
 }
 
 .listitem[open] > .listitem-header .listitem-actions .btn,
@@ -302,3 +316,22 @@ a.listitem:hover {
 .listitem-with-footer .listitem-footer .btn-square {
   @apply flex-auto flex-grow-0 flex-shrink-0;
 }
+
+/*///// Attachments /////*/
+
+.listitem-attachments {
+  @apply grid grid-cols-2 gap-xs place-content-start;
+  grid-template-columns: auto auto;
+}
+
+.listitem-attachments .attachment {
+  @apply h-full w-auto max-h-spacing-4xl;
+}
+ 
+.listitem-attachments .attachment .attachment-thumb {
+  @apply h-full w-auto;
+}
+
+.listitem-attachments .attachment .attachment-thumb img {
+  @apply h-full w-auto;
+}

package/src/assets/stylesheets/components/lists.css

@@ -18,12 +18,12 @@ dl dd {
 }
 
 dl.list-inline {
-  @apply grid gap-xs content-start;
+  @apply grid gap-xs content-start dark:text-label-color;
   grid-template-columns: auto 1fr;
 }
 
 dl.list-inline dt {
-  @apply pr-spacing;
+  @apply pr-spacing dark:pr-xs dark:pt-[2px];
 }
 
 dl.list-inline dd {

package/src/assets/stylesheets/components/splitview.css

@@ -67,8 +67,6 @@
   }
   .splitview-list {
     display: block;
-    /* grid-row-start: 3;
-    grid-row-end: 5; */
   }
 }
 
@@ -113,7 +111,7 @@
 /*///// Splitview Details /////*/
 
 .splitview-details {
-  @apply grid overflow-hidden h-full max-h-full min-h-0 max-w-full min-w-0 lg:border-l-2 border-bordercolor;
+  @apply grid overflow-hidden h-full max-h-full min-h-0 max-w-full min-w-0 lg:border-l-2 border-bordercolor dark:border-none;
   grid-area: splitview-details;
   grid-template-areas:  "details-content details-metasidebar"
                         "details-actionbar details-actionbar";
@@ -130,8 +128,12 @@
   grid-template-columns: auto 1fr auto;
 }
 
+.dark .splitview-details-header {
+  grid-template-columns: 1fr auto;
+}
+
 .splitview-details-title {
-  @apply text-heading-3;
+  @apply text-heading-3 dark:text-card-header;
 }
 
 .splitview-details-header .btn-close-detailview {
@@ -179,6 +181,11 @@
   }
 }
 
+.meta-info {
+  @apply grid grid-cols-2 gap-spacing place-content-start place-items-center text-label-color;
+  grid-template-columns: auto auto;
+}
+
 .splitview-details-content-grid {
   @apply grid gap-xs mb-md;
 
@@ -215,20 +222,14 @@
 /*///// Splitview item /////*/
 
 .splitview-item {
-  @apply grid p-xs pr-spacing -mx-xs cursor-pointer;
+  @apply relative grid p-xs pr-spacing -mx-xs dark:mx-0 dark:mb-1px cursor-pointer dark:bg-listitem dark:rounded;
   grid-template-areas: "split-check split-icon split-text split-status";
   grid-template-columns: auto auto 1fr auto;
 }
 
 .splitview-item.selected {
-  @apply text-white bg-info;
-  .splitview-item-icon, 
-  .splitview-item-metainfo {
-    @apply text-white;
-  }
-  .status-icon {
-    @apply bg-white;
-  }
+  @apply text-white bg-info dark:bg-listitem dark:border-r-4 border-link-hover;
+
   .splitview-item-checkbox input {
     @apply border-white;
   }
@@ -240,6 +241,16 @@
   }
 }
 
+body:not(.dark) .splitview-item.selected {
+  .splitview-item-icon, 
+  .splitview-item-metainfo {
+    @apply text-white;
+  }
+  .status-icon {
+    @apply bg-white;
+  }
+}
+
 .splitview-item:hover {
   @apply text-white bg-link-hover;
 
@@ -259,6 +270,9 @@
   .splitview-item-checkbox input[type=checkbox]:checked::after {
     @apply bg-info;
   }
+  .splitview-item-status {
+    @apply text-white;
+  }
 }
 
 .splitview-item-checkbox {
@@ -280,7 +294,7 @@
 }
 
 .splitview-item-title {
-  overflow: hidden;
+  @apply dark:text-heading-5 dark:font-headings overflow-hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   line-clamp: 4;
@@ -293,7 +307,7 @@
 }
 
 .splitview-item-status {
-  @apply flex flex-col items-end w-spacing;
+  @apply flex flex-col items-end w-spacing dark:w-auto dark:text-label-color;
   grid-area: split-status;
 }
 
@@ -305,8 +319,27 @@
   @apply mt-xxs;
 }
 
+.splitview-item.unread::after {
+  @apply absolute w-xxs h-xxs bg-purple rounded-full;
+  content: "";
+  top: 7px;
+  right: 7px;
+}
+
+.splitview-item:hover::after {
+  @apply bg-white;
+}
+
 /*///// Collapsable splitview item/group /////*/
 
+.splitview-group {
+  @apply dark:mb-xs dark:last:mb-0;
+}
+
+.splitview-group summary.splitview-item {
+  @apply dark:pl-lg;
+}
+
 .splitview-group > summary::before {
   @apply inline-block w-icon h-icon mr-xxs bg-primary;
   content: "";
@@ -314,6 +347,14 @@
   mask-image: url("/assets/images/icons/triangle-centered-right.svg");
 }
 
+.dark .splitview-group > summary::before {
+  @apply absolute top-xs left-md bg-label-color;
+}
+
+.splitview-group[open] > summary {
+  @apply rounded-b-none;
+}
+
 .splitview-group[open] > summary::before {
   mask-image: url("/assets/images/icons/triangle-centered-down.svg");
 }
@@ -323,5 +364,20 @@
 }
 
 .splitview-group .splitview-item:not(summary) {
-  padding-left: 65px;
+  @apply pl-[65px] dark:pl-lg dark:rounded-none dark:last:rounded-b;
 }
+
+
+/*///// Grid split /////*/
+
+.grid-splitview {
+  @apply grid grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
+}
+
+.grid-splitview .splitview-list {
+  @apply col-span-1 lg:col-span-2 overflow-y-visible h-fit;
+}
+
+.grid-splitview .splitview-details {
+  @apply block col-span-1 lg:col-span-3 h-auto min-h-auto overflow-y-visible;
+}

package/src/assets/stylesheets/components/tabs.css

@@ -6,7 +6,7 @@
 }
 
 .nav-tabs {
-  @apply border-b border-bordercolor;
+  @apply border-b border-bordercolor dark:border-none dark:-ml-sm;
 }
 
 .nav-tabs::after {
@@ -15,6 +15,16 @@
   background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
 }
 
+.dark .nav-tabs::after {
+  @apply hidden;
+}
+
+.dark .nav-tabs .navlink.active::after {
+  @apply absolute block left-sm right-sm bottom-0 bg-link-hover;
+  content: '';
+  height: 2px;
+}
+
 .nav-tabs::-webkit-scrollbar,
 .nav-pills::-webkit-scrollbar,
 .nav-tabs .navlinks::-webkit-scrollbar {
@@ -25,17 +35,16 @@
 
 .nav-tabs .navlink, 
 .nav-tabs .nav-link {
-  @apply inline-flex items-start whitespace-nowrap mr-md h-spacing text-primary text-heading-5 font-headings border-b border-link-hover rounded-none cursor-pointer;
-  margin-bottom: -1px;
+  @apply relative inline-flex items-start dark:items-center mr-md dark:mr-0 -mb-1px dark:mb-0 h-spacing dark:h-[34px] text-primary dark:text-label-color dark:px-sm dark:rounded-full whitespace-nowrap text-heading-5 font-headings dark:uppercase border-b border-link-hover dark:border-none rounded-none cursor-pointer;
   line-height: 1;
   user-select: none;
 
   &.active {
-    @apply border-b-4 border-info;
+    @apply border-b-4 dark:border-b-2 border-info dark:border-none dark:text-white;
   }
 
   &:hover, &:focus {
-    @apply text-link-hover border-b-4 border-link-hover;
+    @apply text-link-hover border-b-4 dark:border-none border-link-hover dark:bg-link-hover dark:text-white;
   }
 
   &.disabled, &.disabled:hover, &.disabled:focus {

package/src/assets/stylesheets/components/tags.css

@@ -7,14 +7,13 @@
 }
 
 .tag {
-  @apply inline-flex items-center flex-row h-md px-xs text-sm leading-none bg-tag text-appbody-textcolor rounded;
-  padding-top: 2px;
-  padding-bottom: 2px;
+  @apply inline-flex items-center flex-row px-xs dark:px-sm text-sm dark:text-base leading-normal bg-tag text-appbody-textcolor rounded;
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 
 .tag .icon {
-  height: var(--font-size-icon-xs);
-  font-size: var(--font-size-icon-xs);
+  @apply mr-icon-spacing h-icon-xs dark:h-icon text-icon-xs dark:text-icon;
 }
 
 .tag.sm {
@@ -36,7 +35,7 @@
 }
 
 .tag.popover-tag:hover {
-  @apply bg-link-hover text-white;
+  @apply bg-link-hover! text-white;
 }
 
 .tag.popover-tag .icon {
@@ -46,5 +45,21 @@
 }
 
 .tag.popover-tag:hover .icon {
-  @apply text-white;
+  @apply text-white!;
+}
+
+.tag.success {
+  @apply bg-success text-black;
+}
+
+.tag.danger {
+  @apply bg-danger text-white;
+}
+
+.tag.pending {
+  @apply bg-pending text-black;
+}
+
+.tag.light {
+  @apply bg-gray-lightest dark:bg-gray-darker text-black dark:text-white;
 }

package/src/assets/stylesheets/components/typography.css

@@ -53,7 +53,7 @@ code {
 }
 
 .label, .form-label, dt {
-  @apply text-label-color text-label font-semibold;
+  @apply text-label-color text-label font-semibold dark:uppercase;
 }
 
 .link-with-icon {

package/src/assets/stylesheets/components/uploads.css

@@ -21,7 +21,7 @@
   @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
 
   & .attachment-thumb {
-    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white;
+    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white dark:border-bordercolor;
 
     & .icon {
       @apply text-icon-lg;

package/src/assets/stylesheets/tailwind_config.css

@@ -11,6 +11,7 @@
   --color-gray-500: #888888;
   --color-gray-600: #5f656d;
   --color-gray-700: #343A40;
+  --color-gray-750: #2E2E2E;
   --color-gray-800: #262626;
   --color-gray-900: #222222;
   --color-gray-lightest: #f2f2f2;
@@ -64,6 +65,8 @@
   --color-bordercolor-dark: #D4D6DC;
   --color-success: #8cbd24;
   --color-danger: #ec0404;
+  --color-blocked: #f48d21;
+  --color-pending: #888888;
   --color-disabled: #bfc1c5;
   --color-disabled-dark: #5f656d;
   --color-placeholder: #bfc1c5;
@@ -203,6 +206,7 @@
   --spacing-card-md: 17.5rem;
   --spacing-card-sm: 11.25rem;
   --spacing-card-xs: 5rem;
+  --card-padding: 30px;
   --spacing-1px: 1px;
   --spacing-modal-lg: 75rem;
   --spacing-modal-md: 43.75rem;
@@ -277,6 +281,7 @@
   --max-w-card-sm: 11.25rem;
   --max-w-card-xs: 5rem;
   --max-w-capped: 43.75rem;
+  --max-w-centered-content: 1600px;
   --shadow-DEFAULT: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05);
   
   /*//// Grid ////*/

package/src/assets/stylesheets/tailwind_custom_utilities.css

@@ -101,6 +101,11 @@
 @utility text-purple-light { color: var(--color-purple-light); }
 @utility text-purple-500 { color: var(--color-purple-500); }
 @utility text-purple { color: var(--color-purple-DEFAULT); }
+@utility text-blocked { color: var(--color-blocked); }
+@utility text-pending { color: var(--color-pending); }
+@utility text-chart-empty { color: var(--color-chart-empty); }
+
+
 
 @utility border-transparent { border-color: var(--color-transparent); }
 @utility border-current { border-color: var(--color-current); }
@@ -183,9 +188,18 @@
 @utility text-display-3 { font-size: var(--font-size-display-3); }
 @utility text-display-4 { font-size: var(--font-size-display-4); }
 @utility text-hidden { font-size: var(--font-size-hidden); }
+@utility text-card-header {
+  font-size: var(--fontsize-card-header); 
+  font-weight: var( --font-weight-headings);
+  text-transform: uppercase;
+}
+
 
+/* Padding */
+@utility p-card-padding { padding: var(--card-padding); }
 
-/* Spacing classes */
+
+/* min width */
 @utility min-w-auto { min-width: var(--min-w-auto); }
 @utility min-w-btn { min-width: var(--min-w-btn); }
 @utility min-w-btn-sm { min-width: var(--min-w-btn-sm); }
@@ -235,6 +249,8 @@
 @utility min-h-lg { min-height: var(--min-h-lg); }
 @utility min-h-xl { min-height: var(--min-h-xl); }
 @utility min-h-xxl { min-height: var(--min-h-xxl); }
+
+/* max width */
 @utility max-w-1/2 { max-width: var(--max-w-1/2); }
 @utility max-w-2/3 { max-width: var(--max-w-2/3); }
 @utility max-w-8 { max-width: var(--max-w-8); }
@@ -250,6 +266,7 @@
 @utility max-w-card-sm { max-width: var(--max-w-card-sm); }
 @utility max-w-card-xs { max-width: var(--max-w-card-xs); }
 @utility max-w-capped { max-width: var(--max-w-capped); }
+@utility max-w-centered-content { max-width: var(--max-w-centered-content); }
 
 /* Grid classes */
 @utility grid-cols-3-1 { grid-template-columns: var(--grid-cols-3-1); }

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -2,22 +2,41 @@
 @layer theme {
   .dark {
     /* Colors */
-    --color-appbody: #1d1d1d;
+    --color-appbody: #181818;
     --color-appbody-textcolor: #f2f2f2;
+    --color-header: #1d1d1d;
     --color-actionbar: #343A40;
     --color-metasidebar: #262626;
     --color-primary: #78eac1;
     --color-link: #8988eb;
     --color-link-hover: #7954ff;
-    --color-bordercolor: #343A40;
+    --color-bordercolor: #2E2E2E;
     --color-card: #262626;
     --color-disabled: #5f656d;
     --color-listitem: #343A40;
     --color-placeholder: #5f656d;
-    --color-tag: #5f656d;
-    --color-label-color: #bfc1c5;
+    --color-tag: #262626;
+    --color-label-color: #888888;
+    --color-success: #33BA9E;
+    --color-danger: #FF3131;
+    --color-blocked: #F48D21;
+    --color-pending: #888888;
+    --color-chart-empty: #2E2E2E;
+    --color-info: #326dd1;
+    --color-dark: #222222;
+    --color-card: #1D1D1D;
+    --color-listitem: #262626;
 
     /*//// Border radius ////*/
     --radius: 12px;
+
+    /*//// Spacing ////*/
+    --card-padding: 30px;
+    --spacing-grid-gutter: 40px;
+
+    
+    /*//// Fontsize ////*/
+    --fontsize-card-header: 1.125rem;
+    --font-size-label: 0.75rem;
   }
 }

package/src/pages/agenticqa/chat_collapsable.haml

@@ -0,0 +1,29 @@
+---
+tags: agenticqa
+title: Chat collapsable
+---
+
+.list-chat-messages.full-width
+  .chat-message-item.collapsable
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a short message.
+  .chat-message-item.collapsable
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

package/src/pages/agenticqa/chat_form.haml

@@ -0,0 +1,15 @@
+---
+tags: agenticqa
+title: Chat form
+---
+
+.chat-form-row
+  %form.chat-form
+    %h5.text-card-header.mb-xxs Re-Run this check
+    %p.font-light.mb-md Add additional instructions for re-running this check.
+    %textarea.form-control{placeholder:"Add your instructions or feedback for Testinator"}
+    .form-actions
+      %a.btn.btn-primary.rounded-full
+        %span.icon.icon-sync.mr-icon-spacing
+        re-run check
+      %button.btn.btn-secondary.rounded-full Cancel

package/src/pages/agenticqa/chat_history.haml

@@ -0,0 +1,24 @@
+---
+tags: agenticqa
+title: Chat history
+---
+
+.card.p-card-padding
+  %details.chat-history-collapsable
+    %summary.chat-history-header
+      .chat-history-title Show complete history
+    .list-chat-messages.full-width
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+        .chat-header
+          %span.chat-title.label Justification
+          %span.label 5 mins ago
+        .chat-message
+          Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span.chat-title.label Justification
+          %span.label 5 mins ago
+        .chat-message
+          Here's a short message with bits of lorem ipsum.

package/src/pages/agenticqa/chat_messages.haml

@@ -0,0 +1,53 @@
+---
+tags: agenticqa
+title: Chat messages
+---
+
+.list-chat-messages.full-width
+  .chat-message-item
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a short message with bits of lorem ipsum.
+  .chat-message-item
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a short message with bits of lorem ipsum.
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-message-item.collapsable
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    %details
+      %summary.chat-header
+        %span.chat-title.label Collapsable message
+        %span.label 5 mins ago
+      .chat-message
+        Here's a long message with mountains of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  .chat-action-row
+    %a.btn.btn-primary.rounded-full re-run check
+    %a.btn.btn-secondary.rounded-full update check