Bugfix: Align Size column icons flush with cell right edge

- Switch `.col-size` from `text-align: right` to flex with `justify-content: flex-end` and `gap: var(--spacing-xxs)`
- Wrap the size-triad spans in a single `.size-text` span so whitespace text nodes Svelte emits between `{/each}` and the `{#if}` icon blocks stop stealing pixels from the cell (whitespace-only anonymous flex items are `display: none` per the flexbox spec)
- Drop `margin-left` / `vertical-align` from `.size-stale` and `.size-mismatch`; flex `gap` and `align-items: center` now handle spacing

Author: vdavid

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -593,9 +593,11 @@
                         >
                             {#if file.isDirectory}
                                 {#if dirDisplaySize !== undefined}
-                                    {#each formatSizeTriads(dirDisplaySize) as triad, i (i)}
-                                        <span class={triad.tierClass}>{triad.value}</span>
-                                    {/each}
+                                    <span class="size-text"
+                                        >{#each formatSizeTriads(dirDisplaySize) as triad, i (i)}<span
+                                                class={triad.tierClass}>{triad.value}</span
+                                            >{/each}</span
+                                    >
                                     {#if indexing}
                                         <span class="size-stale icon-indicator" use:tooltip={'Updating index — size may change.'}
                                             ><IconHourglass width="12" height="12" /></span
@@ -631,9 +633,11 @@
                                     <span class="size-dir">&lt;dir&gt;</span>
                                 {/if}
                             {:else if fileDisplaySize !== undefined}
-                                {#each formatSizeTriads(fileDisplaySize) as triad, i (i)}
-                                    <span class={triad.tierClass}>{triad.value}</span>
-                                {/each}
+                                <span class="size-text"
+                                    >{#each formatSizeTriads(fileDisplaySize) as triad, i (i)}<span
+                                            class={triad.tierClass}>{triad.value}</span
+                                        >{/each}</span
+                                >
                             {/if}
                         </span>
                         <span class="col-date">{formatDateTime(file.modifiedAt)}</span>
@@ -755,10 +759,19 @@
     }
 
     .col-size {
-        text-align: right;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--spacing-xxs);
         font-size: var(--font-size-sm);
     }
 
+    /* Groups the number triads into one flex item so the right-edge alignment is
+       predictable when the row also has an icon next to the number. */
+    .size-text {
+        display: inline;
+    }
+
     .size-dir {
         color: var(--color-text-secondary);
     }
@@ -771,16 +784,12 @@
     .size-stale {
         display: inline-flex;
         align-items: center;
-        vertical-align: middle;
-        margin-left: var(--spacing-xxs);
         cursor: help;
     }
 
     .size-mismatch {
         display: inline-flex;
         align-items: center;
-        vertical-align: middle;
-        margin-left: var(--spacing-xxs);
         cursor: help;
     }