From 736c674da0a9f907baf1f6e7ac9e3706149dfd49 Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Sun, 28 Jan 2024 00:00:10 -0500
Subject: [PATCH] feat: limit registry username column width

Fixes the unlimited width + long username as shown below or in
issue #5670, by setting a maximum width + no overflow + text
ellipsis. After fixing that I noticed that there is no space
between the columns so the user and password still touch, so I
added space-x-2 in all 4 row groups.

Fixes: #5670.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 .../preferences/PreferencesRegistriesEditing.svelte    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte b/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte
index f7f8e6be4740..735a8170e381 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte
@@ -257,7 +257,7 @@ const processPasswordElement = (node: HTMLInputElement, registry: containerDeskt
   <div class="container bg-charcoal-600 rounded-md p-3">
     <!-- Registries table start -->
     <div class="w-full border-t border-b border-gray-900" role="table" aria-label="Registries">
-      <div class="flex w-full" role="rowgroup" aria-label="header">
+      <div class="flex w-full space-x-2" role="rowgroup" aria-label="header">
         <div class="flex-1 text-left py-4 pl-5 text-sm font-bold w-auto" role="columnheader">Registry Location</div>
         <div class="text-left py-4 text-sm font-bold w-1/4" role="columnheader">Username</div>
         <div class="text-left py-4 text-sm font-bold w-2/5" role="columnheader">Password</div>
@@ -269,7 +269,7 @@ const processPasswordElement = (node: HTMLInputElement, registry: containerDeskt
           class="flex flex-col w-full border-t border-gray-900"
           role="row"
           aria-label="{registry.name ? registry.name : registry.serverUrl}">
-          <div class="flex flex-row items-center pt-4 pb-3">
+          <div class="flex flex-row items-center pt-4 pb-3 space-x-2">
             <div class="flex-1 pl-5 pr-5 text-sm w-auto m-auto" role="cell">
               <div class="flex w-full h-full">
                 <div class="flex items-center">
@@ -295,7 +295,7 @@ const processPasswordElement = (node: HTMLInputElement, registry: containerDeskt
             </div>
 
             <!-- Username -->
-            <div class="text-sm w-1/4 m-auto" role="cell">
+            <div class="text-sm w-1/4 m-auto text-ellipsis overflow-hidden max-x-32" role="cell">
               {#if originRegistries.some(r => r.serverUrl === registry.serverUrl)}
                 <div class="text-left h-7 pr-5 mt-1.5 mb-0.5 text-sm w-full">
                   <input
@@ -433,7 +433,7 @@ const processPasswordElement = (node: HTMLInputElement, registry: containerDeskt
       {#each $registriesSuggestedInfos as registry, i (registry)}
         <!-- Add new registry form start -->
         <div
-          class="flex flex-col w-full border-t border-gray-900"
+          class="flex flex-col w-full border-t border-gray-900 space-x-2"
           role="row"
           aria-label="{registry.name ? registry.name : registry.url}">
           <div class="flex flex-row items-center pt-4 pb-3">
@@ -540,7 +540,7 @@ const processPasswordElement = (node: HTMLInputElement, registry: containerDeskt
 
       {#if showNewRegistryForm}
         <!-- Add new registry form start -->
-        <div class="flex flex-col w-full border-t border-gray-900">
+        <div class="flex flex-col w-full border-t border-gray-900 space-x-2">
           <div class="flex flex-row items-center pt-4 pb-3">
             <div class="flex-1 pl-10 pr-5 text-sm w-auto m-auto">
               <input