From 777ba366fcfeccc663910d9d7e89cd5ae0980116 Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <cfern1990@gmail.com>
Date: Tue, 21 Apr 2026 17:10:22 -0400
Subject: [PATCH] Tighten appearance of ability use chat messages

---
 styles/less/ui/chat/ability-use.less | 38 ++++++++++++++--------------
 templates/ui/chat/ability-use.hbs    | 20 ++++++++++-----
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/styles/less/ui/chat/ability-use.less b/styles/less/ui/chat/ability-use.less
index b590911d..d028fa7a 100644
--- a/styles/less/ui/chat/ability-use.less
+++ b/styles/less/ui/chat/ability-use.less
@@ -6,12 +6,6 @@
 #interface.theme-light {
     .daggerheart.chat.domain-card {
         .domain-card-move .domain-card-header {
-            border-bottom: 1px solid @dark-blue;
-
-            &:hover {
-                background: @dark-blue-10;
-            }
-
             .domain-label {
                 .title {
                     color: @dark-blue;
@@ -29,6 +23,13 @@
             }
         }
 
+        &:has(.description) .domain-card-move .domain-card-header {
+            border-bottom: 1px solid @dark-blue;
+            &:hover {
+                background: @dark-blue-10;
+            }
+        }
+
         .description {
             color: @dark;
         }
@@ -43,7 +44,7 @@
 
         .card-img {
             width: 100%;
-            height: 200px;
+            height: 180px;
             mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 90%, transparent 100%);
             object-fit: cover;
         }
@@ -68,23 +69,12 @@
                 flex-direction: row;
                 align-items: center;
                 margin: 8px;
-                padding-bottom: 5px;
-                width: -webkit-fill-available;
                 gap: 5px;
-                border-bottom: 1px solid @golden;
-
-                &:hover {
-                    background: @golden-10;
-                    cursor: pointer;
-                    transition: all 0.3s ease;
-                }
 
                 .domain-label {
                     display: flex;
                     flex-direction: column;
                     width: 100%;
-                    padding-bottom: 5px;
-                    width: -webkit-fill-available;
                     gap: 5px;
 
                     .title {
@@ -95,7 +85,7 @@
 
                     .tags {
                         display: flex;
-                        gap: 10px;
+                        gap: 4px;
                         flex-wrap: wrap;
 
                         .tag {
@@ -116,6 +106,16 @@
             }
         }
 
+        &:has(.description) .domain-card-move .domain-card-header {
+            border-bottom: 1px solid @golden;
+            padding-bottom: 5px;
+            &:hover {
+                background: @golden-10;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }
+        }
+
         .description {
             padding: 8px;
         }
diff --git a/templates/ui/chat/ability-use.hbs b/templates/ui/chat/ability-use.hbs
index a8481dfb..214852af 100644
--- a/templates/ui/chat/ability-use.hbs
+++ b/templates/ui/chat/ability-use.hbs
@@ -4,15 +4,21 @@
         <summary class="domain-card-header">
             <div class="domain-label">
                 <h2 class="title">{{item.name}}</h2>
-                <ul class="tags">
-                    {{#each item.tags as |tag|}}
-                        <li class="tag"><span>{{tag}}</span></li>
-                    {{/each}}
-                </ul>
+                {{#if item.tags}}
+                    <ul class="tags">
+                        {{#each item.tags as |tag|}}
+                            <li class="tag"><span>{{tag}}</span></li>
+                        {{/each}}
+                    </ul>
+                {{/if}}
             </div>
-            <i class="fa-solid fa-chevron-down"></i>
+            {{#if description}}
+                <i class="fa-solid fa-chevron-down"></i>
+            {{/if}}
         </summary>
-        <div class="description">{{{description}}}</div>
+        {{#if description}}
+            <div class="description">{{{description}}}</div>
+        {{/if}}
     </details>
     <footer class="ability-card-footer">
         {{#each actions as |action|}}