From 4e8e61bcb53ced0d79d0c4459380fa27a556afd4 Mon Sep 17 00:00:00 2001
From: Vova Kulikov <vova@sourcegraph.com>
Date: Wed, 1 May 2024 14:15:23 +0200
Subject: [PATCH 1/2] Improve result indicator layout

---
 .../resultsIndicator/ResultsIndicator.svelte  | 78 +++++++++++--------
 .../resultsIndicator/SuggestedAction.svelte   |  2 -
 .../src/routes/search/SearchResults.svelte    | 10 +--
 .../routes/search/StreamingProgress.svelte    |  1 -
 4 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
index 18b816358c9e..a28f771e3551 100644
--- a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
+++ b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
@@ -36,52 +36,66 @@
     $: done = progress.done || state === 'complete'
 </script>
 
-<div class="indicator">
-    <div>
-        {#if loading}
-            <LoadingSpinner --icon-size="18px" inline />
-        {:else}
-            <Icon
-                svgPath={icons[severity]}
-                --icon-size="18px"
-                --color={isError ? 'var(--danger)' : 'var(--text-title)'}
-            />
-        {/if}
-    </div>
+<div class="root">
+    <div class="indicator">
+        <div class="progress-message">
+            <div class="icon">
+                {#if loading}
+                    <LoadingSpinner --icon-size="18px" inline />
+                {:else}
+                    <Icon
+                        svgPath={icons[severity]}
+                        --icon-size="18px"
+                        --color={isError ? 'var(--danger)' : 'var(--text-title)'}
+                    />
+                {/if}
+            </div>
+
+            <ProgressMessage {state} {progress} {severity} />
+        </div>
 
-    <div class="messages">
-        <ProgressMessage {state} {progress} {severity} />
-        {#if !done && takingTooLong}
-            <TimeoutMessage />
-        {:else if done}
-            <SuggestedAction {progress} {suggestedItems} {severity} {state} />
-        {:else}
-            <span>Running search...</span>
-        {/if}
+        <div class="messages">
+            {#if !done && takingTooLong}
+                <TimeoutMessage />
+            {:else if done}
+                <SuggestedAction {progress} {suggestedItems} {severity} {state} />
+            {:else}
+                <span>Running search...</span>
+            {/if}
+        </div>
     </div>
+
     <Icon svgPath={mdiChevronDown} --icon-size="18px" --color={isError ? 'var(--danger)' : 'var(--text-title)'} />
 </div>
 
 <style lang="scss">
+    .root {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+    }
+
     .indicator {
         display: flex;
-        flex-flow: row nowrap;
-        justify-content: space-evenly;
+        flex-wrap: wrap;
         align-items: center;
         gap: 0.5rem;
-        min-width: 200px;
-        max-width: fit-content;
 
-        padding: 0.25rem;
+        .progress-message {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+
+        .icon {
+            align-self: baseline;
+        }
 
         .messages {
             display: flex;
-            flex-flow: column nowrap;
-            justify-content: center;
-            align-items: flex-start;
-            margin-right: 0.75rem;
-            margin-left: 0.5rem;
-            row-gap: 0.25rem;
+            flex-flow: row nowrap;
+            align-items: baseline;
+            gap: 0.25rem;
         }
 
         span {
diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/SuggestedAction.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/SuggestedAction.svelte
index e150a54fb94b..2dce6d332f5d 100644
--- a/client/web-sveltekit/src/lib/search/resultsIndicator/SuggestedAction.svelte
+++ b/client/web-sveltekit/src/lib/search/resultsIndicator/SuggestedAction.svelte
@@ -10,7 +10,6 @@
     export let state: 'error' | 'complete' | 'loading'
 
     const SEE_MORE = 'See more details'
-    const CENTER_DOT = '\u00B7' // AKA 'interpunct'
 
     interface ItemsBySeverity {
         items: Skipped[]
@@ -40,7 +39,6 @@
     {#if hasSkippedItems && mostSevere}
         <small class="info-badge" class:error-text={isError}>{capitalize(mostSevere?.title ?? mostSevere.title)}</small>
         {#if mostSevere.suggested}
-            <small>{CENTER_DOT}</small>
             <small>{capitalize(mostSevere?.suggested ? mostSevere.suggested.title : '')}</small>
             <small class="code-font">{mostSevere.suggested?.queryExpression}</small>
         {/if}
diff --git a/client/web-sveltekit/src/routes/search/SearchResults.svelte b/client/web-sveltekit/src/routes/search/SearchResults.svelte
index 4eae85c6b7de..703f8b029baf 100644
--- a/client/web-sveltekit/src/routes/search/SearchResults.svelte
+++ b/client/web-sveltekit/src/routes/search/SearchResults.svelte
@@ -237,12 +237,11 @@
         flex-direction: column;
 
         .actions {
-            border-bottom: 1px solid var(--border-color);
-            padding: 0.5rem 0;
-            padding-left: 0.25rem;
+            flex-shrink: 0;
             display: flex;
             align-items: center;
-            flex-shrink: 0;
+            padding: 0.5rem;
+            border-bottom: 1px solid var(--border-color);
         }
 
         .result-list {
@@ -258,10 +257,9 @@
         .message-container {
             display: flex;
             flex-direction: column;
+            margin: 2rem;
             align-items: center;
-            margin: auto;
             color: var(--text-muted);
-            margin: 2rem;
         }
     }
 </style>
diff --git a/client/web-sveltekit/src/routes/search/StreamingProgress.svelte b/client/web-sveltekit/src/routes/search/StreamingProgress.svelte
index 0e29bea9de38..67cb713bdfb2 100644
--- a/client/web-sveltekit/src/routes/search/StreamingProgress.svelte
+++ b/client/web-sveltekit/src/routes/search/StreamingProgress.svelte
@@ -163,7 +163,6 @@
     .progress-button {
         border: 1px solid var(--border-color-2);
         border-radius: 4px;
-        margin-left: 0.3rem;
     }
 
     .streaming-popover {

From c2ad91f0d184248f65112b516fe22a9823f1e817 Mon Sep 17 00:00:00 2001
From: Vova Kulikov <vova@sourcegraph.com>
Date: Wed, 1 May 2024 14:51:47 +0200
Subject: [PATCH 2/2] Address gaps values

---
 .../src/lib/search/resultsIndicator/ResultsIndicator.svelte    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
index a28f771e3551..af935b2ed3dc 100644
--- a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
+++ b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
@@ -79,7 +79,8 @@
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        gap: 0.5rem;
+        column-gap: 0.5rem;
+        row-gap: 0.25rem;
 
         .progress-message {
             display: flex;