From 7b294791dd53b6118ed7cb468da1a413bcfeea63 Mon Sep 17 00:00:00 2001
From: Kevin Hahn <kevin_hahn@sil.org>
Date: Thu, 9 Jan 2025 11:22:21 +0700
Subject: [PATCH 1/2] enable linting on github actions (#1352)

* enable linting on github actions

* run codeql when codeql workflow changes
---
 .github/workflows/codeql.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index c4d4ea566..0abfabbbd 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -10,6 +10,7 @@ on:
       - "**/*.csproj"
       - "**/*.ts"
       - "**/*.js"
+      - '.github/workflows/codeql.yml'
   schedule:
     - cron: '34 21 * * 2'
 
@@ -38,6 +39,8 @@ jobs:
           build-mode: none
         - language: javascript-typescript
           build-mode: none
+        - language: actions
+          build-mode: none
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4

From be8253c3ed48fd89a0dd6fed9885e5a3a1b4b63c Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 9 Jan 2025 08:26:24 +0100
Subject: [PATCH 2/2] Viewer mobile improvements (#1348)

* Fix page and header titles

* Make editor mobile friendly

* Standardize breakpoints a bit better

* Use correct expand/collapse icons

* Fix standalone viewer svelte app

* Make the back button take the user back to the entry list or previously selected entry

* Improve popstate handler and fix TS error
---
 frontend/viewer/src/ProjectView.svelte        | 82 +++++++++++--------
 frontend/viewer/src/app.postcss               | 15 ++++
 .../src/lib/activity/ActivityView.svelte      |  2 +-
 .../src/lib/entry-editor/FieldTitle.svelte    |  2 +-
 .../ComplexFormComponents.svelte              |  2 +-
 .../field-editors/ComplexForms.svelte         |  2 +-
 .../viewer/src/lib/entry-editor/field.postcss | 22 ++++-
 .../lib/entry-editor/inputs/CrdtField.svelte  |  2 +-
 .../object-editors/EntryEditor.svelte         |  4 +-
 .../viewer/src/lib/history/HistoryView.svelte |  2 +-
 .../viewer/src/lib/layout/EntryList.svelte    |  6 +-
 .../src/lib/search-bar/SearchBar.svelte       |  4 +-
 .../viewer/src/lib/status/SaveStatus.svelte   |  2 +-
 frontend/viewer/tailwind.config.cjs           | 11 ++-
 frontend/viewer/vite.config.ts                |  4 +-
 15 files changed, 109 insertions(+), 53 deletions(-)

diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
index d3d5cbab4..db4ec645a 100644
--- a/frontend/viewer/src/ProjectView.svelte
+++ b/frontend/viewer/src/ProjectView.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import {AppBar, Button, ProgressCircle} from 'svelte-ux';
   import {
-    mdiArrowCollapseLeft,
     mdiArrowCollapseRight,
+    mdiArrowExpandLeft,
     mdiArrowLeft,
     mdiChatQuestion,
     mdiEyeSettingsOutline,
@@ -153,6 +153,21 @@
   let showOptionsDialog = false;
   let pickedEntry = false;
   let navigateToEntryId = getSearchParam(ViewerSearchParam.EntryId);
+
+  // Makes the back button work for going back to the list view
+  // todo use a lib for this?
+  window.addEventListener('popstate', () => {
+    const currEntryId = getSearchParam(ViewerSearchParam.EntryId);
+    if (!currEntryId) {
+      pickedEntry = false;
+      $selectedEntry = undefined;
+    } else if (currEntryId !== $selectedEntry?.id) {
+      pickedEntry = true;
+      navigateToEntryId = currEntryId;
+      refreshSelection();
+    }
+  });
+
   const selectedEntry = writable<IEntry | undefined>(undefined);
   setContext('selectedEntry', selectedEntry);
   // For some reason reactive syntax doesn't pick up every change, so we need to manually subscribe
@@ -160,7 +175,7 @@
   const unsubSelectedEntry = selectedEntry.subscribe(updateEntryIdSearchParam);
   $: { pickedEntry; updateEntryIdSearchParam(); }
   function updateEntryIdSearchParam() {
-    updateSearchParam(ViewerSearchParam.EntryId, navigateToEntryId ?? (pickedEntry ? $selectedEntry?.id : undefined), true);
+    updateSearchParam(ViewerSearchParam.EntryId, navigateToEntryId ?? (pickedEntry ? $selectedEntry?.id : undefined), false);
   }
 
   $: {
@@ -176,6 +191,7 @@
       const entry = $entries.find(e => e.id === navigateToEntryId);
       if (entry) {
         $selectedEntry = entry;
+        pickedEntry = true;
       }
     } else if ($selectedEntry !== undefined) {
       const entry = $entries.find(e => e.id === $selectedEntry!.id);
@@ -184,9 +200,7 @@
       }
     }
 
-    if ($selectedEntry) {
-      pickedEntry = true;
-    } else {
+    if (!$selectedEntry) {
       pickedEntry = false;
       if ($entries?.length > 0)
         $selectedEntry = $entries[0];
@@ -293,8 +307,8 @@
 </div>
 {:else}
 <div class="project-view !flex flex-col PortalTarget" style={spaceForEditorStyle}>
-  <AppBar class="bg-secondary min-h-12 shadow-md">
-    <div slot="title" class="prose">
+  <AppBar class="bg-secondary min-h-12 shadow-md" head={false}>
+    <div slot="title" class="prose whitespace-nowrap">
       <h3>{projectName}</h3>
     </div>
     <Button
@@ -303,35 +317,26 @@
       icon={mdiHome}
       on:click={() => navigate('/')}
     />
-    <div class="flex-grow-0 flex-shrink-0 lg:hidden mx-2 sm:mr-0" class:invisible={!pickedEntry}>
+    <div class="flex-grow-0 flex-shrink-0 lg-view:hidden ml-2" class:invisible={!pickedEntry}>
       <Button icon={mdiArrowLeft} size="sm" iconOnly rounded variant="outline" on:click={() => pickedEntry = false} />
     </div>
     {#if $features.write}
-      <div class="inline-flex flex-grow-0 basis-60 max-sm:hidden mx-2">
+      <div class="inline-flex flex-grow-0 basis-40 max-sm:hidden mx-2 sm-view:basis-10">
         <SaveStatus />
       </div>
     {/if}
 
-    <div class="max-sm:hidden sm:flex-grow"></div>
+    <div class="sm:flex-grow"></div>
     <div class="flex-grow-[2] mx-2">
       <SearchBar on:entrySelected={(e) => navigateToEntry(e.detail.entry, e.detail.search)}
                  createNew={newEntryDialog !== undefined}
                  on:createNew={(e) => openNewEntryDialog(e.detail)} />
     </div>
     <div class="max-sm:hidden flex-grow"></div>
-    <div slot="actions" class="flex items-center gap-2 sm:gap-4 whitespace-nowrap">
+    <div slot="actions" class="flex items-center gap-2 lg-view:gap-4 whitespace-nowrap">
       {#if !readonly}
         <NewEntryDialog bind:this={newEntryDialog} />
       {/if}
-      <Button
-        on:click={() => (showOptionsDialog = true)}
-        size="sm"
-        variant="outline"
-        icon={mdiEyeSettingsOutline}>
-        <div class="hidden md:contents">
-          Configure
-        </div>
-      </Button>
       {#if $features.history}
         <ActivityView {projectName}/>
       {/if}
@@ -350,19 +355,28 @@
           </div>
         </Button>
       {/if}
+      <Button
+        on:click={() => (showOptionsDialog = true)}
+        size="sm"
+        variant="outline"
+        icon={mdiEyeSettingsOutline}>
+        <div class="hidden lg-view:contents">
+          Configure
+        </div>
+      </Button>
     </div>
   </AppBar>
   <main bind:this={editorElem} class="p-4 flex grow">
     <div
-      class="grid flex-grow items-start justify-stretch md:justify-center"
+      class="grid flex-grow items-start justify-stretch lg-view:justify-center"
       style="grid-template-columns: minmax(0, min-content) minmax(0, min-content) minmax(0, min-content);"
     >
-      <div class="w-screen max-w-full lg:w-[500px] lg:min-w-[300px] collapsible-col side-scroller flex" class:lg:!w-[1024px]={expandList} class:lg:max-w-[25vw]={!expandList} class:max-lg:collapse-col={pickedEntry}>
+      <div class="w-screen max-w-full lg-view:w-[500px] lg-view:min-w-[300px] collapsible-col side-scroller flex" class:lg-view:!w-[1024px]={expandList} class:lg-view:max-w-[25vw]={!expandList} class:sm-view:collapse-col={pickedEntry}>
         <EntryList bind:search={$search} entries={$entries} loading={$loadingEntries} bind:expand={expandList} on:entrySelected={() => pickedEntry = true} />
       </div>
-      <div class="max-w-full w-screen lg:w-screen collapsible-col" class:lg:px-6={!expandList} class:max-lg:pr-6={pickedEntry && !readonly} class:lg:collapse-col={expandList} class:max-lg:collapse-col={!pickedEntry}>
+      <div class="max-w-full w-screen lg-view:w-screen collapsible-col overflow-x-visible" class:lg-view:px-6={!expandList} class:sm-view:pr-6={pickedEntry && !readonly} class:lg-view:collapse-col={expandList} class:sm-view:collapse-col={!pickedEntry}>
         {#if $selectedEntry}
-          <div class="mb-6">
+          <div class="sm-form:mb-4 mb-6">
             <DictionaryEntryViewer entry={$selectedEntry} />
           </div>
           <Editor entry={$selectedEntry}
@@ -381,13 +395,15 @@
           </div>
         {/if}
       </div>
-      <div class="side-scroller pl-6 border-l-2 gap-4 flex flex-col col-start-3" class:border-l-2={$selectedEntry && !expandList} class:max-lg:border-l-2={pickedEntry && !readonly} class:max-lg:hidden={!pickedEntry || readonly} class:lg:hidden={expandList}>
-        <div class="hidden" class:sm:hidden={expandList}>
-          <Button icon={collapseActionBar ? mdiArrowCollapseLeft : mdiArrowCollapseRight} class="aspect-square w-10" size="sm" iconOnly rounded variant="outline" on:click={() => collapseActionBar = !collapseActionBar} />
-        </div>
-        <div class="sm:w-[15vw] collapsible-col max-sm:self-center" class:self-center={collapseActionBar} class:lg:collapse-col={expandList} class:w-min={collapseActionBar}>
+      <div class="side-scroller pl-6 border-l-2 gap-4 flex flex-col col-start-3" class:border-l-2={$selectedEntry && !expandList} class:sm-view:border-l-2={pickedEntry && !readonly} class:sm-view:hidden={!pickedEntry || readonly} class:lg-view:hidden={expandList}>
+        {#if $selectedEntry}
+          <div class="sm-form:hidden" class:sm:hidden={expandList}>
+            <Button icon={collapseActionBar ? mdiArrowExpandLeft : mdiArrowCollapseRight} class="text-field-sibling-button" iconOnly rounded variant="outline" on:click={() => collapseActionBar = !collapseActionBar} />
+          </div>
+        {/if}
+        <div class="sm-form:w-auto w-[15vw] collapsible-col max-sm:self-center" class:self-center={collapseActionBar} class:lg-view:collapse-col={expandList} class:!w-min={collapseActionBar}>
           {#if $selectedEntry}
-            <div class="contents" class:lg:hidden={expandList}>
+            <div class="contents" class:lg-view:hidden={expandList}>
               <div class="h-full flex flex-col gap-4 justify-stretch">
                 {#if !readonly}
                   <div class="contents" bind:this={entryActionsElem}>
@@ -403,14 +419,14 @@
                       variant="fill-light"
                       color="info"
                       size="sm">
-                      <img src={flexLogo} alt="FieldWorks logo" class="h-6"/>
-                      <div class="hidden" class:sm:contents={!$entryActionsPortal.collapsed}>
+                      <img src={flexLogo} alt="FieldWorks logo" class="h-6 max-w-fit"/>
+                      <div class="sm-form:hidden" class:hidden={$entryActionsPortal.collapsed}>
                         Open in FieldWorks
                       </div>
                     </Button>
                   </div>
                 {/if}
-                <div class="contents max-sm:hidden" class:hidden={collapseActionBar}>
+                <div class="contents sm-form:hidden" class:hidden={collapseActionBar}>
                   <Toc entry={$selectedEntry} />
                 </div>
               </div>
diff --git a/frontend/viewer/src/app.postcss b/frontend/viewer/src/app.postcss
index 1c0e90f5a..dcc4ad401 100644
--- a/frontend/viewer/src/app.postcss
+++ b/frontend/viewer/src/app.postcss
@@ -45,9 +45,19 @@
 }
 
 @layer components {
+  .sm-form {
+    grid-template-columns: fit-content(70px) 1fr 1fr;
+  }
+
+  .xs-form {
+    grid-template-columns: fit-content(70px) 1fr;
+  }
+
   .editor-grid {
     display: grid;
     grid-template-columns: 170px fit-content(80px) 1fr;
+    @apply sm-form:sm-form;
+    @apply xs-form:xs-form;
   }
 
   .collapsible-col {
@@ -67,6 +77,7 @@
     width: 0 !important;
     max-width: 0 !important;
     opacity: 0 !important;
+    transition: 0s;
   }
 
   .text-field-sibling-button {
@@ -96,3 +107,7 @@
   max-width: 100%;
   overflow: hidden;
 }
+
+.AppBar :has(> [slot="actions"]) {
+  flex-grow: 0;
+}
diff --git a/frontend/viewer/src/lib/activity/ActivityView.svelte b/frontend/viewer/src/lib/activity/ActivityView.svelte
index 81bf19a4c..23878d78e 100644
--- a/frontend/viewer/src/lib/activity/ActivityView.svelte
+++ b/frontend/viewer/src/lib/activity/ActivityView.svelte
@@ -46,7 +46,7 @@
 
 <Toggle let:on={open} let:toggleOn let:toggleOff on:toggleOn={load}>
   <Button on:click={toggleOn} icon={mdiHistory} variant="fill-outline" color="info" size="sm">
-    <div class="hidden sm:contents">
+    <div class="hidden lg-view:contents">
       Activity
     </div>
   </Button>
diff --git a/frontend/viewer/src/lib/entry-editor/FieldTitle.svelte b/frontend/viewer/src/lib/entry-editor/FieldTitle.svelte
index b856ad494..b7540776d 100644
--- a/frontend/viewer/src/lib/entry-editor/FieldTitle.svelte
+++ b/frontend/viewer/src/lib/entry-editor/FieldTitle.svelte
@@ -13,7 +13,7 @@
 
 </script>
 
-<div>
+<div class="field-title">
   <span class="inline-flex items-center relative">
     <span class="name" title={`${id}: ${fieldName({name, id})}`}>
       {fieldName({name, id}, $currentView.i18nKey)}
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte
index 5aa439f11..b800ea0bc 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/ComplexFormComponents.svelte
@@ -61,7 +61,7 @@
     <EntryOrSenseItemList bind:value {readonly} on:change={() => dispatch('change', { value })} getEntryId={(e) => e.componentEntryId} getHeadword={(e) => e.componentHeadword}>
       <svelte:fragment slot="actions">
         <Button on:click={() => openPicker = true} icon={mdiPlus} variant="fill-light" color="success" size="sm">
-          <div class="max-sm:hidden">Add Component</div>
+          Add Component
         </Button>
         <EntryOrSensePicker title="Add component to complex form" bind:open={openPicker} on:pick={(e) => addComponent(e.detail)}
           {disableEntry} {disableSense} />
diff --git a/frontend/viewer/src/lib/entry-editor/field-editors/ComplexForms.svelte b/frontend/viewer/src/lib/entry-editor/field-editors/ComplexForms.svelte
index 9fbd748c0..bc060fe09 100644
--- a/frontend/viewer/src/lib/entry-editor/field-editors/ComplexForms.svelte
+++ b/frontend/viewer/src/lib/entry-editor/field-editors/ComplexForms.svelte
@@ -55,7 +55,7 @@
     <EntryOrSenseItemList bind:value {readonly} on:change={() => dispatch('change', { value })} getEntryId={(e) => e.complexFormEntryId} getHeadword={(e) => e.complexFormHeadword}>
       <svelte:fragment slot="actions">
         <Button on:click={() => openPicker = true} icon={mdiPlus} variant="fill-light" color="success" size="sm">
-          <div class="max-sm:hidden">Add Complex Form</div>
+          Add Complex Form
         </Button>
         <EntryOrSensePicker title="Add complex form" bind:open={openPicker} mode="only-entries" on:pick={(e) => addComplexForm(e.detail)}
           {disableEntry} />
diff --git a/frontend/viewer/src/lib/entry-editor/field.postcss b/frontend/viewer/src/lib/entry-editor/field.postcss
index 91e7dec82..bcd54ae8f 100644
--- a/frontend/viewer/src/lib/entry-editor/field.postcss
+++ b/frontend/viewer/src/lib/entry-editor/field.postcss
@@ -1,5 +1,5 @@
 .field {
-    @apply grid grid-cols-subgrid col-span-3 items-center mb-4;
+    @apply grid grid-cols-subgrid items-center mb-4;
 
     &.multi-field {
       @apply items-baseline;
@@ -43,4 +43,24 @@
         }
       }
     }
+
+    .field-title, .fields, .ws-field-wrapper, .ws-field, .item-list-field {
+      @apply sm-form:!col-span-full;
+
+      & :has(> .field-container) {
+        @apply sm-form:col-span-2;
+      }
+
+      &.field-title {
+        @apply sm-form:mb-2;
+      }
+
+      &.item-list-field {
+        @apply sm-form:pl-0;
+      }
+
+      &.ws-field > .label {
+        @apply xs-form:text-left;
+      }
+    }
   }
diff --git a/frontend/viewer/src/lib/entry-editor/inputs/CrdtField.svelte b/frontend/viewer/src/lib/entry-editor/inputs/CrdtField.svelte
index 8a57c5dea..623a29ab0 100644
--- a/frontend/viewer/src/lib/entry-editor/inputs/CrdtField.svelte
+++ b/frontend/viewer/src/lib/entry-editor/inputs/CrdtField.svelte
@@ -85,7 +85,7 @@
   {#if unsavedChanges}
     <Tooltip title="Unsaved changes" delay={0} placement="top" offset={4}>
       <span
-        class="absolute -left-5 top-1/2 -translate-y-1/2 bg-blue-700 rounded-full h-2.5 w-2.5"
+        class="absolute -left-3.5 top-1/2 xs-form:bottom-2.5 xs-form:top-auto -translate-y-1/2 bg-blue-700 rounded-full h-2.5 w-2.5"
       ></span>
     </Tooltip>
   {/if}
diff --git a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte
index 07bfe2d0b..00837a772 100644
--- a/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte
+++ b/frontend/viewer/src/lib/entry-editor/object-editors/EntryEditor.svelte
@@ -222,12 +222,12 @@
   <div class="hidden">
     <div class="contents" use:portal={{ target: $entryActionsPortal.target, enabled: !!$entryActionsPortal.target}}>
       <Button on:click={addSense} icon={mdiPlus} variant="fill-light" color="success" size="sm">
-        <div class="hidden" class:sm:contents={!$entryActionsPortal.collapsed}>
+        <div class="sm-form:hidden" class:hidden={$entryActionsPortal.collapsed}>
           Add Sense
         </div>
       </Button>
       <Button on:click={deleteEntry} icon={mdiTrashCanOutline} variant="fill-light" color="danger" size="sm">
-        <div class="hidden" class:sm:contents={!$entryActionsPortal.collapsed}>
+        <div class="sm-form:hidden" class:hidden={$entryActionsPortal.collapsed}>
           Delete Entry
         </div>
       </Button>
diff --git a/frontend/viewer/src/lib/history/HistoryView.svelte b/frontend/viewer/src/lib/history/HistoryView.svelte
index 46362b42c..3a269ab3f 100644
--- a/frontend/viewer/src/lib/history/HistoryView.svelte
+++ b/frontend/viewer/src/lib/history/HistoryView.svelte
@@ -30,7 +30,7 @@
 </script>
 <Toggle let:on={open} let:toggleOn let:toggleOff on:toggleOn={load}>
   <Button on:click={toggleOn} icon={mdiHistory} variant="fill-light" color="info" size="sm">
-    <div class="hidden" class:sm:contents={!small}>
+    <div class="sm-form:hidden" class:hidden={small}>
       View History
     </div>
   </Button>
diff --git a/frontend/viewer/src/lib/layout/EntryList.svelte b/frontend/viewer/src/lib/layout/EntryList.svelte
index 1a4bcc431..d61d8256f 100644
--- a/frontend/viewer/src/lib/layout/EntryList.svelte
+++ b/frontend/viewer/src/lib/layout/EntryList.svelte
@@ -2,7 +2,7 @@
   import { Button, Icon, InfiniteScroll, ListItem, ProgressCircle, TextField } from 'svelte-ux';
   import type { IEntry } from '$lib/dotnet-types';
   import { firstDefOrGlossVal, headword } from '../utils';
-  import { mdiArrowExpandLeft, mdiArrowExpandRight, mdiBookOpenVariantOutline, mdiBookSearchOutline, mdiClose, mdiFormatListText } from '@mdi/js';
+  import { mdiArrowCollapseLeft, mdiArrowExpandRight, mdiBookOpenVariantOutline, mdiBookSearchOutline, mdiClose, mdiFormatListText } from '@mdi/js';
   import IndexCharacters from './IndexCharacters.svelte';
   import type { Writable } from 'svelte/store';
   import { createEventDispatcher, getContext } from 'svelte';
@@ -76,8 +76,8 @@
       rounded
       on:click={() => dictionaryMode = !dictionaryMode}>
     </Button>
-    <div class="hidden lg:contents">
-      <Button icon={expand ? mdiArrowExpandLeft : mdiArrowExpandRight} variant="outline" iconOnly
+    <div class="hidden lg-view:contents">
+      <Button icon={expand ? mdiArrowCollapseLeft : mdiArrowExpandRight} variant="outline" iconOnly
         class="text-field-sibling-button"
         rounded
         on:click={() => expand = !expand}>
diff --git a/frontend/viewer/src/lib/search-bar/SearchBar.svelte b/frontend/viewer/src/lib/search-bar/SearchBar.svelte
index 71662bc61..ba0bf62fb 100644
--- a/frontend/viewer/src/lib/search-bar/SearchBar.svelte
+++ b/frontend/viewer/src/lib/search-bar/SearchBar.svelte
@@ -79,12 +79,12 @@
   <Field
     classes={{ input: 'my-1 justify-center opacity-60' }}
     class="cursor-pointer">
-    <div class="hidden lg:contents">
+    <div class="hidden lg-view:contents whitespace-nowrap">
       Find entry...
       <span class="ml-2"><Icon data={mdiMagnify} /></span>
       <span class="ml-4"><span class="key">Shift</span>+<span class="key">Shift</span></span>
     </div>
-    <div class="contents lg:hidden">
+    <div class="contents lg-view:hidden">
       <Icon data={mdiBookSearchOutline} />
     </div>
   </Field>
diff --git a/frontend/viewer/src/lib/status/SaveStatus.svelte b/frontend/viewer/src/lib/status/SaveStatus.svelte
index df802588e..59c6b664f 100644
--- a/frontend/viewer/src/lib/status/SaveStatus.svelte
+++ b/frontend/viewer/src/lib/status/SaveStatus.svelte
@@ -96,7 +96,7 @@
         </div>
       </Popover>
       <Button class="font-normal" color="info" iconOnly rounded="full" icon={statusIcon} on:click={toggle}>
-        <span class="max-md:hidden contents">
+        <span class="sm-view:hidden contents">
           {#if showStatus}
             {#if lastStatus === 'saved-to-disk'}
               <span class="text-sm">Project saved to disk</span>
diff --git a/frontend/viewer/tailwind.config.cjs b/frontend/viewer/tailwind.config.cjs
index 7b22ec053..28693de4d 100644
--- a/frontend/viewer/tailwind.config.cjs
+++ b/frontend/viewer/tailwind.config.cjs
@@ -60,10 +60,15 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        'max-xs': { 'max': '400px' },
         'max-sm': { 'max': '639px' },
-        'max-md': { 'max': '767px' },
-        'max-lg': { 'max': '1023px' },
+
+        // Breakpoints for the entry form aka editor
+        'xs-form': {'max': '800px'},
+        'sm-form': {'max': '1279px'},
+
+        // Breakpoints for the project view layout
+        'sm-view': { 'max': '800px' },
+        'lg-view': '801px',
       },
     },
   },
diff --git a/frontend/viewer/vite.config.ts b/frontend/viewer/vite.config.ts
index 94a797f8a..a8eeb9596 100644
--- a/frontend/viewer/vite.config.ts
+++ b/frontend/viewer/vite.config.ts
@@ -7,7 +7,6 @@ export default defineConfig(({ mode, command }) => {
   const webComponent = mode === 'web-component';
   return {
     base: !webComponent && command == "build" ? '/_content/FwLiteShared/viewer' : '/',
-
     build: {
       ...(webComponent ? {
         lib: {
@@ -15,7 +14,8 @@ export default defineConfig(({ mode, command }) => {
           formats: ['es'],
         },
         outDir: 'dist-web-component',
-      } : {
+      }
+        : {
         outDir: '../../backend/FwLite/FwLiteShared/wwwroot/viewer',
         manifest: true,
       }),