fix spacing

sourcegraph · Apr 30, 2024 · 9cfde63 · 9cfde63
1 parent 7797089
commit 9cfde63
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/client/web-sveltekit/src/lib/LoadingSpinner.svelte b/client/web-sveltekit/src/lib/LoadingSpinner.svelte
@@ -4,10 +4,12 @@
 </script>
 
 <div class:center>
-    <div class="loading-spinner" class:icon-inline={inline} aria-label="loading" aria-live="polite" />
+    <div class="loading-spinner" class:inline aria-label="loading" aria-live="polite" />
 </div>
 
 <style lang="scss">
+    $size: var(--size, 1rem);
+
     .center {
         display: flex;
         flex-direction: column;
@@ -26,9 +28,18 @@
             --loading-spinner-inner-color: var(--white);
         }
 
-        margin: 0.125rem;
-        width: 1rem;
-        height: 1rem;
+        width: $size;
+        height: $size;
+        &.inline {
+            $inlineSize: #{(16 / 14)}em;
+            width: $inlineSize;
+            height: $inlineSize;
+
+            vertical-align: bottom;
+            display: inline-flex;
+            align-items: center;
+        }
+
         border-radius: 50%;
         animation: loading-spinner-spin 1s linear infinite;
         border: 2px solid var(--loading-spinner-outer-color, rgba(0, 0, 0, 0.3));

diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
@@ -37,17 +37,11 @@
 </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>
+    {#if loading}
+        <LoadingSpinner --size="16px" />
+    {:else}
+        <Icon svgPath={icons[severity]} --icon-size="16px" --color={isError ? 'var(--danger)' : 'var(--text-title)'} />
+    {/if}
 
     <div class="messages">
         <ProgressMessage {state} {progress} {severity} />
@@ -59,25 +53,25 @@
             <span>Running search...</span>
         {/if}
     </div>
-    <Icon svgPath={mdiChevronDown} --icon-size="18px" --color={isError ? 'var(--danger)' : 'var(--text-title)'} />
+
+    <Icon svgPath={mdiChevronDown} --icon-size="12px" --color={isError ? 'var(--danger)' : 'var(--text-title)'} />
 </div>
 
 <style lang="scss">
     .indicator {
         display: flex;
         flex-flow: row nowrap;
-        justify-content: space-evenly;
+        justify-content: space-between;
         align-items: center;
-        gap: 0.5rem;
-        min-width: 200px;
-        max-width: fit-content;
+        gap: 0.75rem;
+        padding: 0.375rem 0.75rem;
 
         .messages {
             display: flex;
             flex-flow: column nowrap;
             justify-content: center;
             align-items: flex-start;
-            row-gap: 0.25rem;
+            row-gap: 0.125rem;
         }
 
         span {

diff --git a/client/web-sveltekit/src/routes/search/StreamingProgress.svelte b/client/web-sveltekit/src/routes/search/StreamingProgress.svelte
@@ -163,6 +163,7 @@
     .progress-button {
         border: 1px solid var(--border-color-2);
         border-radius: 4px;
+        padding: 0;
     }
 
     .streaming-popover {