diff --git a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
index 18b816358c9e..af935b2ed3dc 100644
--- a/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
+++ b/client/web-sveltekit/src/lib/search/resultsIndicator/ResultsIndicator.svelte
@@ -36,52 +36,67 @@
     $: 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;
+        column-gap: 0.5rem;
+        row-gap: 0.25rem;
+
+        .progress-message {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
 
-        padding: 0.25rem;
+        .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 {