From 893fa624e40944d7c4a8e3a31bd006d8ca14c6b7 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 7 Nov 2024 08:35:05 -0500
Subject: [PATCH] UX: increase gist size, and adjust surrounding elements to
 accommodate (#900)

---
 .../discourse/components/ai-topic-gist.gjs    |  2 +
 .../summarization/common/ai-summary.scss      | 50 +++++++++++++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-topic-gist.gjs b/assets/javascripts/discourse/components/ai-topic-gist.gjs
index 3b5ad21e..3ec25657 100644
--- a/assets/javascripts/discourse/components/ai-topic-gist.gjs
+++ b/assets/javascripts/discourse/components/ai-topic-gist.gjs
@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
+import bodyClass from "discourse/helpers/body-class";
 
 export default class AiTopicGist extends Component {
   @service router;
@@ -21,6 +22,7 @@ export default class AiTopicGist extends Component {
 
   <template>
     {{#if this.showGist}}
+      {{bodyClass "--topic-list-with-gist"}}
       <div class="ai-topic-gist">
         <div class="ai-topic-gist__text">
           {{@topic.ai_topic_gist}}
diff --git a/assets/stylesheets/modules/summarization/common/ai-summary.scss b/assets/stylesheets/modules/summarization/common/ai-summary.scss
index 2ee486a4..514e74c0 100644
--- a/assets/stylesheets/modules/summarization/common/ai-summary.scss
+++ b/assets/stylesheets/modules/summarization/common/ai-summary.scss
@@ -224,22 +224,62 @@
     line-height: 1.4;
     width: 90%;
   }
-  .desktop-view & {
-    margin-top: 0.15em;
-    margin-bottom: -0.15em;
-  }
+
   &__text {
     color: var(--primary-high);
     text-wrap: pretty;
     word-wrap: break-word;
     font-size: var(--font-down-1);
-    max-width: 70ch;
+    max-width: 65ch;
     .visited & {
       color: var(--primary-medium);
     }
   }
 }
 
+.--topic-list-with-gist {
+  .topic-list-item {
+    .main-link {
+      .desktop-view & {
+        padding: 1em 1em 1em 0.67em;
+      }
+      font-size: var(--font-up-2);
+      line-height: var(--line-height-medium);
+    }
+    .link-bottom-line {
+      font-size: var(--font-down-2);
+      margin-top: 0.25em;
+    }
+    .ai-topic-gist {
+      font-size: var(--font-up-1);
+      line-height: var(--line-height-large);
+      margin-top: 0.25em;
+      margin-bottom: 0.15em;
+    }
+    .topic-post-badges {
+      font-size: var(--font-down-1);
+    }
+  }
+
+  .mobile-view & {
+    .topic-list {
+      .topic-list-item > .topic-list-data {
+        padding: 1em 0;
+      }
+      .topic-item-stats .num.activity {
+        align-self: end;
+        margin-bottom: -0.15em; // vertical alignment
+      }
+      .pull-left {
+        padding-top: 0.25em;
+      }
+      .right {
+        margin-left: 3.75em;
+      }
+    }
+  }
+}
+
 .ai-gists-dropdown-trigger {
   font-size: var(--font-down-1);
   color: var(--primary-medium);