From 9418bd9c7d0cd31e2e1356db52dd472e1561a654 Mon Sep 17 00:00:00 2001
From: RumovZ <gp5glkw78@relay.firefox.com>
Date: Wed, 1 May 2024 09:49:57 +0200
Subject: [PATCH] Improve and unify web dialog styling (#3167)

* Rework ChangeNotetypePage with existing components

* Use disabled Select instead of LabelButton

* Don't use  button for unclickable arrow

* Rework ImportLogPage with existing components

* Improve deck options styling

* Align spacing in ChangeNotetypePage further

* Use StickyContainer on ImportPage

* Format
---
 ftl/core/importing.ftl                        |   1 +
 ts/lib/components/ButtonToolbar.svelte        |   7 +-
 ts/lib/components/StickyHeader.svelte         |  35 +++---
 ts/lib/components/TitledContainer.svelte      |   3 +-
 ts/lib/components/VirtualTable.svelte         |   4 +-
 .../change-notetype/ChangeNotetypePage.svelte |  57 ++++-----
 .../change-notetype/NotetypeSelector.svelte   |  31 ++---
 ts/routes/change-notetype/StickyHeader.svelte |  52 ++-------
 ts/routes/deck-options/SaveButton.svelte      | 108 +++++++++---------
 ts/routes/deck-options/TabbedValue.svelte     |   3 +-
 ts/routes/import-page/CloseButton.svelte      |  53 ---------
 ts/routes/import-page/DetailsTable.svelte     |  98 ++++++++--------
 ts/routes/import-page/ImportLogPage.svelte    |  69 ++++++-----
 ts/routes/import-page/ImportPage.svelte       |   2 +-
 14 files changed, 215 insertions(+), 308 deletions(-)
 delete mode 100644 ts/routes/import-page/CloseButton.svelte

diff --git a/ftl/core/importing.ftl b/ftl/core/importing.ftl
index 514719bf7..0987818e1 100644
--- a/ftl/core/importing.ftl
+++ b/ftl/core/importing.ftl
@@ -234,6 +234,7 @@ importing-match-scope-help =
 importing-tag-all-notes-help =
     These tags will be added to both newly-imported and updated notes.
 importing-tag-updated-notes-help = These tags will be added to any updated notes.
+importing-overview = Overview
 
 ## NO NEED TO TRANSLATE. This text is no longer used by Anki, and will be removed in the future.
 
diff --git a/ts/lib/components/ButtonToolbar.svelte b/ts/lib/components/ButtonToolbar.svelte
index 27d193a06..69a64b2f4 100644
--- a/ts/lib/components/ButtonToolbar.svelte
+++ b/ts/lib/components/ButtonToolbar.svelte
@@ -39,11 +39,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .button-toolbar {
         flex-wrap: var(--buttons-wrap);
         padding-left: 0.15rem;
-
-        :global(.button-group) {
-            /* TODO replace with gap once available */
-            margin-right: 0.15rem;
-            margin-bottom: 0.15rem;
-        }
+        gap: 1rem;
     }
 </style>
diff --git a/ts/lib/components/StickyHeader.svelte b/ts/lib/components/StickyHeader.svelte
index e23fab216..54abfb0aa 100644
--- a/ts/lib/components/StickyHeader.svelte
+++ b/ts/lib/components/StickyHeader.svelte
@@ -8,6 +8,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import LabelButton from "./LabelButton.svelte";
     import Shortcut from "./Shortcut.svelte";
+    import StickyContainer from "./StickyContainer.svelte";
+    import ButtonToolbar from "./ButtonToolbar.svelte";
 
     export let path: string;
     export let onImport: () => void;
@@ -19,9 +21,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<div class="sticky-header d-flex flex-row justify-content-between">
-    <div class="filename">{basename(path)}</div>
-    <div class="accept">
+<StickyContainer
+    --gutter-block="0.5rem"
+    --gutter-inline="0.25rem"
+    --sticky-borders="0 0 1px"
+    breakpoint="sm"
+>
+    <ButtonToolbar class="justify-content-between" wrap={false}>
+        <div class="filename">{basename(path)}</div>
         <LabelButton
             primary
             tooltip={getPlatformString(keyCombination)}
@@ -32,26 +39,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <div class="import">{tr.actionsImport()}</div>
         </LabelButton>
         <Shortcut {keyCombination} on:action={onImport} />
-    </div>
-</div>
+    </ButtonToolbar>
+</StickyContainer>
 
 <style lang="scss">
-    .sticky-header {
-        position: sticky;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 10;
-
-        margin: 0;
-        padding: 0.5rem;
-
-        background: var(--canvas);
-        border-bottom: 1px solid var(--border);
-
-        .import {
-            margin-inline: 0.75rem;
-        }
+    .import {
+        margin: 0.2rem 0.75rem;
     }
 
     .filename {
diff --git a/ts/lib/components/TitledContainer.svelte b/ts/lib/components/TitledContainer.svelte
index dde5f6867..fcfec729b 100644
--- a/ts/lib/components/TitledContainer.svelte
+++ b/ts/lib/components/TitledContainer.svelte
@@ -55,10 +55,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
     h1 {
         border-bottom: 1px solid var(--border);
+        padding-bottom: 0.25em;
     }
     .help-badge {
         right: 0;
-        bottom: 12px;
+        top: 0;
         color: #555;
         &.rtl {
             right: unset;
diff --git a/ts/lib/components/VirtualTable.svelte b/ts/lib/components/VirtualTable.svelte
index 8e91b0472..df0c53b89 100644
--- a/ts/lib/components/VirtualTable.svelte
+++ b/ts/lib/components/VirtualTable.svelte
@@ -33,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div
     class="outer"
-    style="--container-height: {containerHeight + 1}px"
+    style="--container-height: {containerHeight}px"
     bind:this={container}
     on:scroll={() => (scrollTop = container.scrollTop)}
 >
@@ -67,7 +67,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         width: 100%;
         overflow: auto;
 
-        height: var(--container-height);
+        max-height: var(--container-height);
         margin: 0 auto;
     }
 
diff --git a/ts/routes/change-notetype/ChangeNotetypePage.svelte b/ts/routes/change-notetype/ChangeNotetypePage.svelte
index 390c714bf..db25aea2e 100644
--- a/ts/routes/change-notetype/ChangeNotetypePage.svelte
+++ b/ts/routes/change-notetype/ChangeNotetypePage.svelte
@@ -6,10 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { renderMarkdown } from "@tslib/helpers";
 
-    import Col from "$lib/components/Col.svelte";
     import Container from "$lib/components/Container.svelte";
     import Row from "$lib/components/Row.svelte";
     import StickyContainer from "$lib/components/StickyContainer.svelte";
+    import TitledContainer from "$lib/components/TitledContainer.svelte";
 
     import type { ChangeNotetypeState } from "./lib";
     import { MapContext } from "./lib";
@@ -19,31 +19,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let state: ChangeNotetypeState;
     $: info = state.info;
-    let offset: number;
 </script>
 
-<div bind:offsetHeight={offset}>
-    <StickyContainer
-        --gutter-block="0.1rem"
-        --gutter-inline="0.25rem"
-        --sticky-borders="0 0 1px"
-        --z-index="4"
-    >
-        <NotetypeSelector {state} />
-    </StickyContainer>
-</div>
+<StickyContainer
+    --gutter-block="0.5rem"
+    --gutter-inline="0.25rem"
+    --sticky-borders="0 0 1px"
+    breakpoint="sm"
+>
+    <NotetypeSelector {state} />
+</StickyContainer>
 
-<div id="scrollArea" style="--offset: {offset}px; --gutter-inline: 0.25rem;">
-    <Row class="gx-0" --cols={2}>
-        <Col --col-size={1} breakpoint="md">
-            <Container>
-                <StickyHeader {state} ctx={MapContext.Field} --z-index="2" />
+<Container breakpoint="sm" --gutter-inline="0.25rem" --gutter-block="0.75rem">
+    <Row --cols={2}>
+        <TitledContainer title={tr.changeNotetypeFields()}>
+            <Row>
+                <StickyHeader {state} ctx={MapContext.Field} />
                 <Mapper {state} ctx={MapContext.Field} />
-            </Container>
-        </Col>
-        <Col --col-size={1} breakpoint="md">
-            <Container>
-                <StickyHeader {state} ctx={MapContext.Template} --z-index="2" />
+            </Row>
+        </TitledContainer>
+    </Row>
+    <Row --cols={2}>
+        <TitledContainer title={tr.changeNotetypeTemplates()}>
+            <Row>
+                <StickyHeader {state} ctx={MapContext.Template} />
                 {#if $info.templates}
                     <Mapper {state} ctx={MapContext.Template} />
                 {:else}
@@ -51,15 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         {@html renderMarkdown(tr.changeNotetypeToFromCloze())}
                     </div>
                 {/if}
-            </Container>
-        </Col>
+            </Row>
+        </TitledContainer>
     </Row>
-</div>
-
-<style>
-    #scrollArea {
-        padding: 0;
-        overflow: hidden auto;
-        height: calc(100% - var(--offset));
-    }
-</style>
+</Container>
diff --git a/ts/routes/change-notetype/NotetypeSelector.svelte b/ts/routes/change-notetype/NotetypeSelector.svelte
index cf8840366..2eaeae770 100644
--- a/ts/routes/change-notetype/NotetypeSelector.svelte
+++ b/ts/routes/change-notetype/NotetypeSelector.svelte
@@ -3,11 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Badge from "$lib/components/Badge.svelte";
     import ButtonToolbar from "$lib/components/ButtonToolbar.svelte";
     import Icon from "$lib/components/Icon.svelte";
     import { arrowLeftIcon, arrowRightIcon } from "$lib/components/icons";
-    import LabelButton from "$lib/components/LabelButton.svelte";
     import Select from "$lib/components/Select.svelte";
 
     import type { ChangeNotetypeState } from "./lib";
@@ -25,17 +23,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonToolbar class="justify-content-between" wrap={false}>
-    <LabelButton ellipsis disabled={true}>
-        {$info.oldNotetypeName}
-    </LabelButton>
-    <Badge iconSize={70}>
-        {#if window.getComputedStyle(document.body).direction == "rtl"}
-            <Icon icon={arrowLeftIcon} />
-        {:else}
-            <Icon icon={arrowRightIcon} />
-        {/if}
-    </Badge>
-    <Select class="flex-grow-1" list={options} bind:value {label} />
-
+    <div class="d-flex flex-row w-100">
+        <Select label={$info.oldNotetypeName} value={1} list={[1]} disabled={true} />
+        <div class="arrow-container">
+            {#if window.getComputedStyle(document.body).direction == "rtl"}
+                <Icon icon={arrowLeftIcon} />
+            {:else}
+                <Icon icon={arrowRightIcon} />
+            {/if}
+        </div>
+        <Select list={options} bind:value {label} />
+    </div>
     <SaveButton {state} />
 </ButtonToolbar>
+
+<style lang="scss">
+    .arrow-container {
+        margin: 0 0.5em;
+    }
+</style>
diff --git a/ts/routes/change-notetype/StickyHeader.svelte b/ts/routes/change-notetype/StickyHeader.svelte
index 755929388..116cfa444 100644
--- a/ts/routes/change-notetype/StickyHeader.svelte
+++ b/ts/routes/change-notetype/StickyHeader.svelte
@@ -5,13 +5,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
 
-    import Badge from "$lib/components/Badge.svelte";
     import Col from "$lib/components/Col.svelte";
     import Container from "$lib/components/Container.svelte";
-    import Icon from "$lib/components/Icon.svelte";
-    import { exclamationIcon } from "$lib/components/icons";
     import Row from "$lib/components/Row.svelte";
-    import StickyContainer from "$lib/components/StickyContainer.svelte";
 
     import Alert from "./Alert.svelte";
     import type { ChangeNotetypeState } from "./lib";
@@ -22,45 +18,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: info = state.info;
 
-    const heading: string =
-        ctx === MapContext.Field
-            ? tr.changeNotetypeFields()
-            : tr.changeNotetypeTemplates();
-
     $: unused =
         $info.isCloze && ctx === MapContext.Template ? [] : $info.unusedItems(ctx);
 </script>
 
-<StickyContainer
-    --sticky-top={ctx === MapContext.Template ? "-1px" : "0"}
-    --sticky-border="var(--border)"
-    --sticky-borders="0px 0 1px"
->
-    <h1>
-        {heading}
-        {#if unused.length > 0}
-            <Badge iconSize={80}>
-                <Icon icon={exclamationIcon} />
-            </Badge>
-        {/if}
-    </h1>
+{#if unused.length > 0}
+    <Alert {unused} {ctx} />
+{/if}
 
-    {#if unused.length > 0}
-        <Alert {unused} {ctx} />
-    {/if}
-
-    {#if $info.templates}
-        <Container --gutter-inline="0.5rem" --gutter-block="0.2rem">
-            <Row --cols={2}>
-                <Col --col-size={1}><b>{tr.changeNotetypeCurrent()}</b></Col>
-                <Col --col-size={1}><b>{tr.changeNotetypeNew()}</b></Col>
-            </Row>
-        </Container>
-    {/if}
-</StickyContainer>
-
-<style lang="scss">
-    h1 {
-        padding-top: 0.5em;
-    }
-</style>
+{#if $info.templates || ctx === MapContext.Field}
+    <Container --gutter-inline="0.5rem" --gutter-block="0.2rem">
+        <Row --cols={2}>
+            <Col --col-size={1}><b>{tr.changeNotetypeCurrent()}</b></Col>
+            <Col --col-size={1}><b>{tr.changeNotetypeNew()}</b></Col>
+        </Row>
+    </Container>
+{/if}
diff --git a/ts/routes/deck-options/SaveButton.svelte b/ts/routes/deck-options/SaveButton.svelte
index 1c3c2bd63..247f8c66b 100644
--- a/ts/routes/deck-options/SaveButton.svelte
+++ b/ts/routes/deck-options/SaveButton.svelte
@@ -75,58 +75,64 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let showFloating = false;
 </script>
 
-<LabelButton
-    primary
-    on:click={() => save(UpdateDeckConfigsMode.NORMAL)}
-    tooltip={getPlatformString(saveKeyCombination)}
-    --border-left-radius={!rtl ? "var(--border-radius)" : "0"}
-    --border-right-radius={rtl ? "var(--border-radius)" : "0"}
->
-    <div class="save">{tr.deckConfigSaveButton()}</div>
-</LabelButton>
-<Shortcut
-    keyCombination={saveKeyCombination}
-    on:action={() => save(UpdateDeckConfigsMode.NORMAL)}
-/>
-
-<WithFloating
-    show={showFloating}
-    closeOnInsideClick
-    inline
-    on:close={() => (showFloating = false)}
->
-    <IconButton
-        class="chevron"
-        slot="reference"
-        on:click={() => (showFloating = !showFloating)}
-        --border-right-radius={!rtl ? "var(--border-radius)" : "0"}
-        --border-left-radius={rtl ? "var(--border-radius)" : "0"}
-        iconSize={80}
+<div class="d-flex">
+    <LabelButton
+        primary
+        on:click={() => save(UpdateDeckConfigsMode.NORMAL)}
+        tooltip={getPlatformString(saveKeyCombination)}
+        --border-left-radius={!rtl ? "var(--border-radius)" : "0"}
+        --border-right-radius={rtl ? "var(--border-radius)" : "0"}
     >
-        <Icon icon={chevronDown} />
-    </IconButton>
-    <Popover slot="floating">
-        <DropdownItem on:click={() => dispatch("add")}>
-            {tr.deckConfigAddGroup()}
-        </DropdownItem>
-        <DropdownItem on:click={() => dispatch("clone")}>
-            {tr.deckConfigCloneGroup()}
-        </DropdownItem>
-        <DropdownItem on:click={() => dispatch("rename")}>
-            {tr.deckConfigRenameGroup()}
-        </DropdownItem>
-        <DropdownItem on:click={removeConfig}>
-            {tr.deckConfigRemoveGroup()}
-        </DropdownItem>
-        <DropdownDivider />
-        <DropdownItem on:click={() => save(UpdateDeckConfigsMode.APPLY_TO_CHILDREN)}>
-            {tr.deckConfigSaveToAllSubdecks()}
-        </DropdownItem>
-        <DropdownItem on:click={() => save(UpdateDeckConfigsMode.COMPUTE_ALL_WEIGHTS)}>
-            {tr.deckConfigSaveAndOptimize()}
-        </DropdownItem>
-    </Popover>
-</WithFloating>
+        <div class="save">{tr.deckConfigSaveButton()}</div>
+    </LabelButton>
+    <Shortcut
+        keyCombination={saveKeyCombination}
+        on:action={() => save(UpdateDeckConfigsMode.NORMAL)}
+    />
+
+    <WithFloating
+        show={showFloating}
+        closeOnInsideClick
+        inline
+        on:close={() => (showFloating = false)}
+    >
+        <IconButton
+            class="chevron"
+            slot="reference"
+            on:click={() => (showFloating = !showFloating)}
+            --border-right-radius={!rtl ? "var(--border-radius)" : "0"}
+            --border-left-radius={rtl ? "var(--border-radius)" : "0"}
+            iconSize={80}
+        >
+            <Icon icon={chevronDown} />
+        </IconButton>
+        <Popover slot="floating">
+            <DropdownItem on:click={() => dispatch("add")}>
+                {tr.deckConfigAddGroup()}
+            </DropdownItem>
+            <DropdownItem on:click={() => dispatch("clone")}>
+                {tr.deckConfigCloneGroup()}
+            </DropdownItem>
+            <DropdownItem on:click={() => dispatch("rename")}>
+                {tr.deckConfigRenameGroup()}
+            </DropdownItem>
+            <DropdownItem on:click={removeConfig}>
+                {tr.deckConfigRemoveGroup()}
+            </DropdownItem>
+            <DropdownDivider />
+            <DropdownItem
+                on:click={() => save(UpdateDeckConfigsMode.APPLY_TO_CHILDREN)}
+            >
+                {tr.deckConfigSaveToAllSubdecks()}
+            </DropdownItem>
+            <DropdownItem
+                on:click={() => save(UpdateDeckConfigsMode.COMPUTE_ALL_WEIGHTS)}
+            >
+                {tr.deckConfigSaveAndOptimize()}
+            </DropdownItem>
+        </Popover>
+    </WithFloating>
+</div>
 
 <style lang="scss">
     .save {
diff --git a/ts/routes/deck-options/TabbedValue.svelte b/ts/routes/deck-options/TabbedValue.svelte
index 0eb832f33..f948951e6 100644
--- a/ts/routes/deck-options/TabbedValue.svelte
+++ b/ts/routes/deck-options/TabbedValue.svelte
@@ -57,7 +57,7 @@
         flex-wrap: nowrap;
         justify-content: space-between;
         padding-inline: 0;
-        margin-bottom: 0.25rem;
+        margin-bottom: 0.5rem;
         list-style: none;
     }
 
@@ -75,7 +75,6 @@
     li.active > button {
         color: var(--fg);
         border-bottom: 4px solid var(--border-focus);
-        margin-bottom: -2px;
         border-radius: 0;
     }
     button:hover {
diff --git a/ts/routes/import-page/CloseButton.svelte b/ts/routes/import-page/CloseButton.svelte
deleted file mode 100644
index bd198fccb..000000000
--- a/ts/routes/import-page/CloseButton.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import * as tr from "@generated/ftl";
-    import { bridgeCommand } from "@tslib/bridgecommand";
-    import { getPlatformString } from "@tslib/shortcuts";
-
-    import LabelButton from "$lib/components/LabelButton.svelte";
-    import Shortcut from "$lib/components/Shortcut.svelte";
-
-    export let container: HTMLElement;
-    const keyCombination = "Control+Enter";
-
-    function onClose() {
-        bridgeCommand("close");
-    }
-</script>
-
-<div
-    class="fixed-header d-flex flex-row-reverse justify-content-between desktop-only"
-    bind:this={container}
->
-    <LabelButton
-        primary
-        tooltip={getPlatformString(keyCombination)}
-        on:click={onClose}
-        --border-left-radius="5px"
-        --border-right-radius="5px"
-    >
-        <div class="close">{tr.actionsClose()}</div>
-    </LabelButton>
-    <Shortcut {keyCombination} on:action={onClose} />
-</div>
-
-<style lang="scss">
-    .fixed-header {
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        z-index: 10;
-
-        margin: 0;
-        padding: 0.5rem;
-
-        background: var(--canvas);
-
-        .close {
-            margin-inline: 0.75rem;
-        }
-    }
-</style>
diff --git a/ts/routes/import-page/DetailsTable.svelte b/ts/routes/import-page/DetailsTable.svelte
index 5236bb21d..bab9e899f 100644
--- a/ts/routes/import-page/DetailsTable.svelte
+++ b/ts/routes/import-page/DetailsTable.svelte
@@ -17,55 +17,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let summaries: SummarizedLogQueues[];
     export let bottomOffset: number = 0;
 
+    let bottom: HTMLElement;
     $: rows = getRows(summaries);
 </script>
 
-<details>
-    <summary>{tr.importingDetails()}</summary>
-    <VirtualTable
-        class="details-table"
-        itemHeight={50}
-        itemsCount={rows.length}
-        bind:bottomOffset
-    >
-        <tr slot="headers">
-            <th>#</th>
-            <th>{tr.importingStatus()}</th>
-            <th>{tr.editingFields()}</th>
-            <th />
-        </tr>
-        <svelte:fragment slot="row" let:index>
-            <tr>
-                <td class="index-cell">{index + 1}</td>
-                <TableCellWithTooltip
-                    class="status-cell"
-                    tooltip={rows[index].queue.reason}
-                >
-                    {rows[index].summary.action}
-                </TableCellWithTooltip>
-                <TableCellWithTooltip
-                    class="contents-cell"
-                    tooltip={rows[index].note.fields.join(",")}
-                >
-                    {rows[index].note.fields.join(",")}
-                </TableCellWithTooltip>
-                <td class="search-cell">
-                    <IconButton
-                        class="search-icon"
-                        iconSize={100}
-                        active={false}
-                        disabled={!rows[index].summary.canBrowse}
-                        on:click={() => {
-                            showInBrowser([rows[index].note]);
-                        }}
-                    >
-                        <Icon icon={magnifyIcon} />
-                    </IconButton>
-                </td>
+<div bind:this={bottom}>
+    {#if bottom}
+        <VirtualTable
+            class="details-table"
+            itemHeight={40}
+            itemsCount={rows.length}
+            {bottomOffset}
+        >
+            <tr slot="headers">
+                <th>#</th>
+                <th>{tr.importingStatus()}</th>
+                <th>{tr.editingFields()}</th>
+                <th />
             </tr>
-        </svelte:fragment>
-    </VirtualTable>
-</details>
+            <svelte:fragment slot="row" let:index>
+                <tr>
+                    <td class="index-cell">{index + 1}</td>
+                    <TableCellWithTooltip
+                        class="status-cell"
+                        tooltip={rows[index].queue.reason}
+                    >
+                        {rows[index].summary.action}
+                    </TableCellWithTooltip>
+                    <TableCellWithTooltip
+                        class="contents-cell"
+                        tooltip={rows[index].note.fields.join(",")}
+                    >
+                        {rows[index].note.fields.join(",")}
+                    </TableCellWithTooltip>
+                    <td class="search-cell">
+                        <IconButton
+                            class="search-icon"
+                            iconSize={100}
+                            active={false}
+                            disabled={!rows[index].summary.canBrowse}
+                            on:click={() => {
+                                showInBrowser([rows[index].note]);
+                            }}
+                        >
+                            <Icon icon={magnifyIcon} />
+                        </IconButton>
+                    </td>
+                </tr>
+            </svelte:fragment>
+        </VirtualTable>
+    {/if}
+</div>
 
 <style lang="scss">
     :global(.details-table) {
@@ -77,11 +79,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             background: transparent !important;
         }
         tr {
-            height: 50px;
+            height: 40px;
             text-align: center;
         }
         .index-cell {
-            width: 6em;
+            width: 3em;
         }
         :global(.status-cell) {
             width: 5em;
@@ -90,7 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             text-align: left;
         }
         :global(.search-cell) {
-            width: 4em;
+            width: 3em;
         }
     }
 </style>
diff --git a/ts/routes/import-page/ImportLogPage.svelte b/ts/routes/import-page/ImportLogPage.svelte
index 6807d77c6..62851a0e6 100644
--- a/ts/routes/import-page/ImportLogPage.svelte
+++ b/ts/routes/import-page/ImportLogPage.svelte
@@ -7,47 +7,46 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
 
     import Container from "$lib/components/Container.svelte";
+    import Row from "$lib/components/Row.svelte";
+    import TitledContainer from "$lib/components/TitledContainer.svelte";
 
-    import CloseButton from "./CloseButton.svelte";
     import DetailsTable from "./DetailsTable.svelte";
     import { getSummaries } from "./lib";
     import QueueSummary from "./QueueSummary.svelte";
 
     export let response: ImportResponse;
-    const result = response;
-    $: summaries = result ? getSummaries(result.log!) : [];
-    $: foundNotes = result?.log?.foundNotes ?? 0;
-    let closeButton: HTMLElement;
+    $: summaries = getSummaries(response.log!);
+    $: foundNotes = response.log?.foundNotes ?? 0;
+
+    const gutterBlockSize = 0.5;
+    const computedStyle = getComputedStyle(document.documentElement);
+    const rootFontSize = parseInt(computedStyle.fontSize);
+    // Container padding + Row padding + Row margin + TitledContainer padding
+    const bottomOffset = (3 * gutterBlockSize + 0.75) * rootFontSize;
 </script>
 
-<Container class="import-log-page">
-    {#if result}
-        <p class="note-count">
-            {tr.importingNotesFoundInFile2({
-                notes: foundNotes,
-            })}
-        </p>
-        <ul class="summary-list">
-            {#each summaries as summary}
-                <QueueSummary {summary} />
-            {/each}
-        </ul>
-        {#if closeButton}
-            <DetailsTable {summaries} bind:bottomOffset={closeButton.clientHeight} />
-        {/if}
-        <CloseButton bind:container={closeButton} />
-    {/if}
+<Container
+    breakpoint="sm"
+    --gutter-inline="0.25rem"
+    --gutter-block={`${gutterBlockSize}rem`}
+>
+    <Row>
+        <TitledContainer title={tr.importingOverview()}>
+            <p>
+                {tr.importingNotesFoundInFile2({
+                    notes: foundNotes,
+                })}
+            </p>
+            <ul>
+                {#each summaries as summary}
+                    <QueueSummary {summary} />
+                {/each}
+            </ul>
+        </TitledContainer>
+    </Row>
+    <Row>
+        <TitledContainer title={tr.importingDetails()}>
+            <DetailsTable {summaries} {bottomOffset} />
+        </TitledContainer>
+    </Row>
 </Container>
-
-<style lang="scss">
-    :global(.import-log-page) {
-        font-size: 16px;
-        margin: 8px auto;
-    }
-    .note-count {
-        margin-bottom: 4px;
-    }
-    .summary-list {
-        padding-inline-start: 8px;
-    }
-</style>
diff --git a/ts/routes/import-page/ImportPage.svelte b/ts/routes/import-page/ImportPage.svelte
index c921bbb7e..f04f51472 100644
--- a/ts/routes/import-page/ImportPage.svelte
+++ b/ts/routes/import-page/ImportPage.svelte
@@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <Container
             breakpoint="sm"
             --gutter-inline="0.25rem"
-            --gutter-block="0.75rem"
+            --gutter-block="0.5rem"
             class="container-columns"
         >
             <slot />