From 0e2b3263f3947aadc93100a1ab2e9cff9f2dc15a Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sat, 15 Mar 2025 18:34:36 +0000
Subject: [PATCH] feat(web): [Issue-19] Alternative repo and cluster view
 initial commit

---
 packages/web/app/components/GitHubIssue.vue     | 8 ++++----
 packages/web/app/pages/[owner]/[repo]/index.vue | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/web/app/components/GitHubIssue.vue b/packages/web/app/components/GitHubIssue.vue
index c4c32e8..b7fe619 100644
--- a/packages/web/app/components/GitHubIssue.vue
+++ b/packages/web/app/components/GitHubIssue.vue
@@ -39,9 +39,9 @@ function labelColors(color: string) {
 </script>
 
 <template>
-  <article class="flex flex-row gap-2 leading-tightest">
-    <span class="flex-shrink-0 inline-block w-5 h-5 i-tabler-circle-dot text-green-500" />
-    <div class="flex flex-row gap-2 flex-wrap md:flex-nowrap md:pb-6 flex-grow">
+  <article class="border-solid border border-gray-600 rounded-md max-w-full overflow-hidden flex flex-row gap-2 leading-tightest">
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
+    <div class="flex flex-col flex-wrap md:flex-nowrap md:pb-2 flex-grow">
       <NuxtLink
         class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
         :href="url"
@@ -50,7 +50,7 @@ function labelColors(color: string) {
         {{ title?.trim() }}
       </NuxtLink>
       <div
-        class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1"
+        class=" text-xs relative md:mt-1 text-gray-400 mb-1 break-words"
       >
         <NuxtLink
           v-if="owner && repository"
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 45cd73d..b6c9d34 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -160,13 +160,14 @@ const openState = reactive<Record<string, boolean>>({})
       </section>
     </template>
     <template v-else>
+      <section class="grid grid-cols-4 gap-4 ">
       <section
         v-for="(cluster, c) of clusters"
         :key="c"
         :style="{ '--section-index': c }"
-        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
       >
-        <h2 class="my-4 font-bold text-2xl flex items-baseline">
+        <h2 class=" my-4 font-bold text-2xl flex items-baseline">
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
           <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
           <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
@@ -195,6 +196,7 @@ const openState = reactive<Record<string, boolean>>({})
           show {{ cluster.issues.length - 5 }} more
         </button>
       </section>
+      </section>
     </template>
   </div>
 </template>