From ab5f8c5c753832ec949d98c54bbe39e3bad65335 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 13:53:27 +0200
Subject: [PATCH 1/6] Improve context popup rendering

---
 web_src/js/components/ContextPopup.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index e4e8bce184639..9e8ec9238f562 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -91,16 +91,21 @@ export default {
 <template>
   <div ref="root">
     <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
-    <div v-if="!loading && issue !== null">
-      <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p>
-      <p><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
-      <p>{{ body }}</p>
+    <div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2">
+      <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
+      <div><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</div>
+      <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-html="renderedLabels"/>
+      <div class="labels-list-wrapper" v-html="renderedLabels"/>
     </div>
     <div v-if="!loading && issue === null">
-      <p><small>{{ i18nErrorOccurred }}</small></p>
-      <p>{{ i18nErrorMessage }}</p>
+      <div class="tw-text-12">{{ i18nErrorOccurred }}</div>
+      <div>{{ i18nErrorMessage }}</div>
     </div>
   </div>
 </template>
+<style scoped>
+.labels-list-wrapper:has(.labels-list:empty) {
+  display: none;
+}
+</style>

From 87cc2ed06ced8bf6a8de41354f17e4f48b30e0d7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 14:02:35 +0200
Subject: [PATCH 2/6] use v-if

---
 web_src/js/components/ContextPopup.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 9e8ec9238f562..05872535fa4bf 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -96,7 +96,7 @@ export default {
       <div><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</div>
       <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="labels-list-wrapper" v-html="renderedLabels"/>
+      <div v-if="(issue?.labels || []).length" v-html="renderedLabels"/>
     </div>
     <div v-if="!loading && issue === null">
       <div class="tw-text-12">{{ i18nErrorOccurred }}</div>
@@ -104,8 +104,3 @@ export default {
     </div>
   </div>
 </template>
-<style scoped>
-.labels-list-wrapper:has(.labels-list:empty) {
-  display: none;
-}
-</style>

From 66296a76a0d4a9dc08aeb1bbbdcba025dd2b06c3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 14:03:50 +0200
Subject: [PATCH 3/6] disable vue/singleline-html-element-content-newline

---
 web_src/js/components/.eslintrc.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/components/.eslintrc.yaml b/web_src/js/components/.eslintrc.yaml
index 0d233442bc436..a79e96f330dd2 100644
--- a/web_src/js/components/.eslintrc.yaml
+++ b/web_src/js/components/.eslintrc.yaml
@@ -18,4 +18,5 @@ rules:
   vue/attributes-order: [0]
   vue/html-closing-bracket-spacing: [2, {startTag: never, endTag: never, selfClosingTag: never}]
   vue/max-attributes-per-line: [0]
+  vue/singleline-html-element-content-newline: [0]
   vue-scoped-css/enforce-style-type: [0]

From e09fe684f5da8311ad0234a3780060546e3c49c9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 14:13:01 +0200
Subject: [PATCH 4/6] remove ? and array fallback

---
 web_src/js/components/ContextPopup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 05872535fa4bf..436c0ac566fba 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -96,7 +96,7 @@ export default {
       <div><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</div>
       <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-if="(issue?.labels || []).length" v-html="renderedLabels"/>
+      <div v-if="issue.labels.length" v-html="renderedLabels"/>
     </div>
     <div v-if="!loading && issue === null">
       <div class="tw-text-12">{{ i18nErrorOccurred }}</div>

From 9bca0ff1c544c533799f4cee240ef0a53ecd1403 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 14:21:55 +0200
Subject: [PATCH 5/6] use flex-text-block and classes from other issue titles

---
 web_src/js/components/ContextPopup.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 436c0ac566fba..37f623f267ca3 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -93,7 +93,13 @@ export default {
     <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
     <div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
-      <div><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</div>
+      <div class="flex-text-block">
+        <svg-icon :name="icon" :class="['text', color]"/>
+        <span class="issue-title tw-font-semibold tw-break-anywhere">
+          {{ issue.title }}
+          <span class="index">#{{ issue.number }}</span>
+        </span>
+      </div>
       <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-if="issue.labels.length" v-html="renderedLabels"/>

From 5a76f5f0e0da87290448ec82e810812b25bf7cb0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 14:26:10 +0200
Subject: [PATCH 6/6] add classes

---
 web_src/js/components/ContextPopup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 37f623f267ca3..8f389ea003e43 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -104,7 +104,7 @@ export default {
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-if="issue.labels.length" v-html="renderedLabels"/>
     </div>
-    <div v-if="!loading && issue === null">
+    <div class="tw-flex tw-flex-col tw-gap-2" v-if="!loading && issue === null">
       <div class="tw-text-12">{{ i18nErrorOccurred }}</div>
       <div>{{ i18nErrorMessage }}</div>
     </div>