From 4d798dd2e26ba62177bd4607f957b8f7494c31eb Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Tue, 28 Jan 2025 02:30:55 +0100
Subject: [PATCH] Abbreviate selected repo name if too long

---
 gdn-app/src/components/Navbar.vue         |  6 +++---
 gdn-app/src/components/NavbarDropdown.vue | 14 +++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/gdn-app/src/components/Navbar.vue b/gdn-app/src/components/Navbar.vue
index 6b7f1e1..071ef66 100644
--- a/gdn-app/src/components/Navbar.vue
+++ b/gdn-app/src/components/Navbar.vue
@@ -4,12 +4,12 @@ import NavbarDropdown from "./NavbarDropdown.vue";
 </script>
 
 <template>
-  <div class="flex justify-between bg-black p-2 text-white">
+  <div class="flex justify-between gap-1 bg-black p-2 text-white">
     <NavbarDropdown />
     <div
-      class="flex items-center rounded-md bg-neutral-800 px-1 hover:bg-neutral-700 active:bg-neutral-500"
+      class="flex items-center rounded-md bg-neutral-800 px-2 hover:bg-neutral-700 active:bg-neutral-500"
     >
-      <RiSettings3Fill class="h-4" />
+      <RiSettings3Fill size="16px" class="inline" />
     </div>
   </div>
 </template>
diff --git a/gdn-app/src/components/NavbarDropdown.vue b/gdn-app/src/components/NavbarDropdown.vue
index 3e8f15c..9d1577a 100644
--- a/gdn-app/src/components/NavbarDropdown.vue
+++ b/gdn-app/src/components/NavbarDropdown.vue
@@ -32,14 +32,18 @@ function onAddNewRepo() {
   <!-- Navbar entry -->
   <div
     ref="reference"
-    class="relative cursor-default rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700 active:bg-neutral-500"
+    class="relative flex flex-shrink cursor-default overflow-hidden whitespace-nowrap rounded-md bg-neutral-800 pl-2 text-lg font-light hover:bg-neutral-700 active:bg-neutral-500"
     @click="open = !open"
   >
     <span v-if="repos.selectedRepo">{{ repos.selectedRepo.name }}</span>
-    <span v-else class="italic">no repo selected</span>
+    <span v-else class="overflow-hidden overflow-ellipsis italic">
+      no repo selected
+    </span>
 
-    <RiArrowDropUpLine v-if="open" class="inline" />
-    <RiArrowDropDownLine v-else class="inline" />
+    <div>
+      <RiArrowDropUpLine v-if="open" class="inline" />
+      <RiArrowDropDownLine v-else class="inline" />
+    </div>
   </div>
 
   <!-- Close dropdown when clicking outside it -->
@@ -63,7 +67,7 @@ function onAddNewRepo() {
     >
     <hr v-if="repos.reposByName.length > 0" class="m-1 text-neutral-700" />
     <NavbarDropdownEntry class="italic" @click="onAddNewRepo">
-      <RiAddLine class="-ml-2 inline h-4" />add new repo
+      <RiAddLine size="16px" class="-ml-1 inline" /> add new repo
     </NavbarDropdownEntry>
   </div>
 </template>