From d83b1a92b98916be235c4fef8eacf8a6d5c48877 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 24 Nov 2023 18:37:56 +0300
Subject: [PATCH] CSS cleanup ui (#4061)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/ui/src/components/CheckBox.svelte    |  2 ++
 .../ui/src/components/CircleButton.svelte     |  1 +
 packages/ui/src/components/ColorPopup.svelte  |  1 +
 .../src/components/DropdownLabelsPopup.svelte |  1 +
 .../ui/src/components/DropdownPopup.svelte    |  1 +
 .../src/components/DropdownRecordPopup.svelte |  1 +
 .../ui/src/components/EditWithIcon.svelte     |  1 +
 packages/ui/src/components/EmojiPopup.svelte  |  2 ++
 packages/ui/src/components/Expandable.svelte  |  1 +
 packages/ui/src/components/Like.svelte        |  1 +
 packages/ui/src/components/Link.svelte        |  2 ++
 packages/ui/src/components/ListView.svelte    |  1 +
 packages/ui/src/components/Menu.svelte        |  1 +
 packages/ui/src/components/MiniToggle.svelte  |  2 ++
 packages/ui/src/components/NumberInput.svelte |  3 +-
 .../ui/src/components/PanelInstance.svelte    |  1 +
 .../ui/src/components/PopupInstance.svelte    |  1 +
 packages/ui/src/components/Progress.svelte    |  1 +
 packages/ui/src/components/RadioButton.svelte |  1 +
 packages/ui/src/components/Scroller.svelte    |  5 ++++
 packages/ui/src/components/ScrollerBar.svelte |  1 +
 packages/ui/src/components/Section.svelte     |  1 +
 packages/ui/src/components/SelectPopup.svelte |  1 +
 packages/ui/src/components/Separator.svelte   |  1 +
 packages/ui/src/components/ShowMore.svelte    |  1 +
 packages/ui/src/components/StepsDialog.svelte |  1 +
 packages/ui/src/components/Submenu.svelte     |  1 +
 packages/ui/src/components/TabList.svelte     |  1 +
 packages/ui/src/components/TabsControl.svelte |  1 +
 .../ui/src/components/TextAreaEditor.svelte   |  1 +
 .../ui/src/components/TimeShiftPicker.svelte  |  2 ++
 .../ui/src/components/TimeShiftPopup.svelte   |  2 ++
 packages/ui/src/components/Timeline.svelte    | 26 ++---------------
 .../ui/src/components/TooltipInstance.svelte  |  1 +
 .../components/calendar/DateInputBox.svelte   |  6 ++++
 .../calendar/DateRangePicker.svelte           |  1 -
 .../calendar/DateRangePresenter.svelte        | 13 ++++++++-
 .../ui/src/components/calendar/Month.svelte   |  6 ++++
 .../components/calendar/MonthCalendar.svelte  |  1 +
 .../components/calendar/MonthSquare.svelte    |  1 +
 .../ui/src/components/calendar/Shifts.svelte  |  1 +
 .../components/calendar/TimeInputBox.svelte   | 29 ++-----------------
 .../components/calendar/WeekCalendar.svelte   |  1 +
 .../src/components/internal/ClockPopup.svelte |  1 +
 .../components/internal/FontSizePopup.svelte  |  1 +
 .../src/components/internal/LangPopup.svelte  |  1 +
 .../src/components/internal/ThemePopup.svelte |  1 +
 .../components/internal/icons/Computer.svelte |  2 +-
 .../components/internal/icons/Phone.svelte    |  2 +-
 .../src/components/internal/icons/WiFi.svelte |  2 +-
 .../src/components/wizard/WizardStep.svelte   |  1 +
 51 files changed, 84 insertions(+), 57 deletions(-)

diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index ae0a95bb00..11cd4d8be6 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -35,6 +35,8 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
   class="checkbox {size}"
   class:circle
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index 112e11e82b..689b37c421 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -38,6 +38,7 @@
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   {id}
   class="flex-center icon-button icon-{size}"
diff --git a/packages/ui/src/components/ColorPopup.svelte b/packages/ui/src/components/ColorPopup.svelte
index 911d8ad425..c6233c60c3 100644
--- a/packages/ui/src/components/ColorPopup.svelte
+++ b/packages/ui/src/components/ColorPopup.svelte
@@ -62,6 +62,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="selectPopup"
   on:keydown={onKeydown}
diff --git a/packages/ui/src/components/DropdownLabelsPopup.svelte b/packages/ui/src/components/DropdownLabelsPopup.svelte
index ce53d4cc17..92dbd4b9cc 100644
--- a/packages/ui/src/components/DropdownLabelsPopup.svelte
+++ b/packages/ui/src/components/DropdownLabelsPopup.svelte
@@ -85,6 +85,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="selectPopup"
   on:keydown={onKeydown}
diff --git a/packages/ui/src/components/DropdownPopup.svelte b/packages/ui/src/components/DropdownPopup.svelte
index ea82ad3664..97279d993d 100644
--- a/packages/ui/src/components/DropdownPopup.svelte
+++ b/packages/ui/src/components/DropdownPopup.svelte
@@ -74,6 +74,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   {#if withSearch}
     <div class="header">
diff --git a/packages/ui/src/components/DropdownRecordPopup.svelte b/packages/ui/src/components/DropdownRecordPopup.svelte
index 2655edde55..58c11f786d 100644
--- a/packages/ui/src/components/DropdownRecordPopup.svelte
+++ b/packages/ui/src/components/DropdownRecordPopup.svelte
@@ -54,6 +54,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   <div class="menu-space" />
   <div class="scroll">
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index b75caae21b..fbd88e0acf 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -50,6 +50,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="flex-between editbox {size}"
   style={width ? 'width: ' + width : ''}
diff --git a/packages/ui/src/components/EmojiPopup.svelte b/packages/ui/src/components/EmojiPopup.svelte
index e2aef3280d..67114fbdcf 100644
--- a/packages/ui/src/components/EmojiPopup.svelte
+++ b/packages/ui/src/components/EmojiPopup.svelte
@@ -145,6 +145,7 @@
   <div class="flex-row-center popup-header">
     {#each categories as category}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="element"
         class:selected={currentCategory.id === category.id}
@@ -177,6 +178,7 @@
           {#each category.emojis as emoji}
             {#if emoji !== undefined}
               <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <!-- svelte-ignore a11y-no-static-element-interactions -->
               <div class="element" on:click={() => dispatch('close', emoji)}>{emoji}</div>
             {/if}
           {/each}
diff --git a/packages/ui/src/components/Expandable.svelte b/packages/ui/src/components/Expandable.svelte
index c832948551..54802dc333 100644
--- a/packages/ui/src/components/Expandable.svelte
+++ b/packages/ui/src/components/Expandable.svelte
@@ -30,6 +30,7 @@
 <div class="flex-col">
   <div class="expandable-header flex-between" class:expanded class:bordered>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="flex-row-center mr-4"
       class:cursor-pointer={expandable}
diff --git a/packages/ui/src/components/Like.svelte b/packages/ui/src/components/Like.svelte
index a31f559502..956ef79ca0 100644
--- a/packages/ui/src/components/Like.svelte
+++ b/packages/ui/src/components/Like.svelte
@@ -27,6 +27,7 @@
 <div class="like-container" class:voted>
   {#if value > 0}<span>{value}</span>{/if}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="icon" on:click={vote}>
     <Like size={'small'} />
   </div>
diff --git a/packages/ui/src/components/Link.svelte b/packages/ui/src/components/Link.svelte
index ad21b9df4a..c9e221ce6f 100644
--- a/packages/ui/src/components/Link.svelte
+++ b/packages/ui/src/components/Link.svelte
@@ -26,6 +26,8 @@
     fname.length > maxLenght ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2) : fname
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <span class="container" class:disabled on:click>
   {#if icon}
     <span class="icon">
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index 0355aaf6f4..fd5478b057 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -70,6 +70,7 @@
     {#each Array(count) as _, row}
       <slot name="category" item={row} />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="list-item{addClass ? ` ${addClass}` : ''}"
         class:selection={row === selection}
diff --git a/packages/ui/src/components/Menu.svelte b/packages/ui/src/components/Menu.svelte
index 023cb510a3..70bc4e64ac 100644
--- a/packages/ui/src/components/Menu.svelte
+++ b/packages/ui/src/components/Menu.svelte
@@ -113,6 +113,7 @@
   $: popup?.focus()
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="antiPopup{addClass ? ` ${addClass}` : ''}"
   use:resizeObserver={() => {
diff --git a/packages/ui/src/components/MiniToggle.svelte b/packages/ui/src/components/MiniToggle.svelte
index 782b00b8a9..9ab4d8b284 100644
--- a/packages/ui/src/components/MiniToggle.svelte
+++ b/packages/ui/src/components/MiniToggle.svelte
@@ -27,6 +27,8 @@
     <span class="toggle-switch" />
   </label>
   {#if label}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <span
       class="mini-toggle-label"
       on:click={() => {
diff --git a/packages/ui/src/components/NumberInput.svelte b/packages/ui/src/components/NumberInput.svelte
index 3d6791ff4d..e8163b331b 100644
--- a/packages/ui/src/components/NumberInput.svelte
+++ b/packages/ui/src/components/NumberInput.svelte
@@ -121,6 +121,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="editbox-container"
   on:click={() => {
@@ -193,7 +194,7 @@
     }
 
     input[type='number'] {
-      -moz-appearance: textfield;
+      appearance: textfield;
     }
   }
 </style>
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index 3bcbe43e99..e26d3c3815 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -169,6 +169,7 @@
       />
     </div>
     {#if props.element !== 'content'}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="modal-overlay"
         class:show={options.showOverlay}
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 458583c57f..5f48f610a5 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -188,6 +188,7 @@
 </div>
 
 {#if overlay}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="modal-overlay"
     class:testing
diff --git a/packages/ui/src/components/Progress.svelte b/packages/ui/src/components/Progress.svelte
index d54648f66a..070e2c75de 100644
--- a/packages/ui/src/components/Progress.svelte
+++ b/packages/ui/src/components/Progress.svelte
@@ -35,6 +35,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="container" on:click={click} class:cursor-pointer={editable}>
   <div
     class="bar"
diff --git a/packages/ui/src/components/RadioButton.svelte b/packages/ui/src/components/RadioButton.svelte
index 92aa0ab7cb..5fbe1fe429 100644
--- a/packages/ui/src/components/RadioButton.svelte
+++ b/packages/ui/src/components/RadioButton.svelte
@@ -32,6 +32,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="antiRadio gap-{gap}"
   class:disabled
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 7aac3b8376..8c75430482 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -543,6 +543,7 @@
         }
       }}
     >
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         bind:this={divBox}
         class="box{gap ? ` ${gap}` : ''}"
@@ -614,6 +615,7 @@
   {/if}
   {#if mask !== 'none'}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="track"
       class:hovered={isScrolling === 'vertical'}
@@ -621,6 +623,7 @@
         clickOnTrack(ev)
       }}
     />
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="bar"
       class:hovered={isScrolling === 'vertical'}
@@ -633,6 +636,7 @@
   {/if}
   {#if horizontal && maskH !== 'none'}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="track-horizontal"
       class:hovered={isScrolling === 'horizontal'}
@@ -640,6 +644,7 @@
         clickOnTrack(ev, true)
       }}
     />
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="bar-horizontal"
       class:hovered={isScrolling === 'horizontal'}
diff --git a/packages/ui/src/components/ScrollerBar.svelte b/packages/ui/src/components/ScrollerBar.svelte
index ce17a6a181..f84642e62b 100644
--- a/packages/ui/src/components/ScrollerBar.svelte
+++ b/packages/ui/src/components/ScrollerBar.svelte
@@ -128,6 +128,7 @@
   <div bind:this={scroller} class="antiStatesBar mask-{mask} {stepStyle}">
     <slot />
   </div>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="bar"
     class:hovered={isScrolling}
diff --git a/packages/ui/src/components/Section.svelte b/packages/ui/src/components/Section.svelte
index e973bbaea0..f384eaa08f 100644
--- a/packages/ui/src/components/Section.svelte
+++ b/packages/ui/src/components/Section.svelte
@@ -26,6 +26,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="flex-row-center section-container"
   on:click|preventDefault={() => {
diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index 1d69596d4f..ce1d6c716d 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@@ -95,6 +95,7 @@
 <FocusHandler {manager} />
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="selectPopup"
   bind:this={popupElement}
diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte
index a51c6648a0..6fc8ce36bf 100644
--- a/packages/ui/src/components/Separator.svelte
+++ b/packages/ui/src/components/Separator.svelte
@@ -498,6 +498,7 @@
 </script>
 
 {#if sState !== SeparatorState.HIDDEN}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     bind:this={separator}
     style:--separator-size={`${separatorSize}px`}
diff --git a/packages/ui/src/components/ShowMore.svelte b/packages/ui/src/components/ShowMore.svelte
index f80a4e26f7..0dbce97a1b 100644
--- a/packages/ui/src/components/ShowMore.svelte
+++ b/packages/ui/src/components/ShowMore.svelte
@@ -49,6 +49,7 @@
 
   {#if !ignore && bigger && !fixed}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="showMore" class:outter={cHeight > limit} on:click={toggle}>
       <Label label={cHeight > limit ? ui.string.ShowLess : ui.string.ShowMore} />
     </div>
diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte
index 90fd69bee3..7e368e59d6 100644
--- a/packages/ui/src/components/StepsDialog.svelte
+++ b/packages/ui/src/components/StepsDialog.svelte
@@ -88,6 +88,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <Panel bind:panelWidth bind:innerWidth bind:useMaxWidth {floatAside} {allowClose} isAside isHeader on:close>
   <svelte:fragment slot="title">
     {@const additionalStepInfo = currentStepModel?.additionalInfo}
diff --git a/packages/ui/src/components/Submenu.svelte b/packages/ui/src/components/Submenu.svelte
index d40fe9b9e0..af3bfa8ef8 100644
--- a/packages/ui/src/components/Submenu.svelte
+++ b/packages/ui/src/components/Submenu.svelte
@@ -39,6 +39,7 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   bind:this={element}
   on:keydown
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 396b863d7a..2c97be68bb 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -70,6 +70,7 @@
       <div class="tablist-container {kind} {size}">
         {#each items as item, i}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div
             bind:this={tabs[i]}
             class={kind === 'normal' || kind === 'regular' ? 'button' : 'plain'}
diff --git a/packages/ui/src/components/TabsControl.svelte b/packages/ui/src/components/TabsControl.svelte
index 8401ff5525..3eb3f6e2cf 100644
--- a/packages/ui/src/components/TabsControl.svelte
+++ b/packages/ui/src/components/TabsControl.svelte
@@ -26,6 +26,7 @@
 <div class="flex-stretch tabs-container" class:small={size === 'small'} style:padding class:noMargin>
   {#each model as tab, i}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="flex-row-center tab"
       class:selected={i === selected}
diff --git a/packages/ui/src/components/TextAreaEditor.svelte b/packages/ui/src/components/TextAreaEditor.svelte
index a11da62fe7..bb69e6f24e 100644
--- a/packages/ui/src/components/TextAreaEditor.svelte
+++ b/packages/ui/src/components/TextAreaEditor.svelte
@@ -69,6 +69,7 @@
     <div class="flex-row-center mt-3">
       <Button label={submitLabel} kind="no-border" size="medium" on:click={submit} />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="ml-2" on:click={cancel}>
         <ActionIcon icon={IconClose} size="medium" action={cancel} />
       </div>
diff --git a/packages/ui/src/components/TimeShiftPicker.svelte b/packages/ui/src/components/TimeShiftPicker.svelte
index 104a7cb434..0ed1ace5af 100644
--- a/packages/ui/src/components/TimeShiftPicker.svelte
+++ b/packages/ui/src/components/TimeShiftPicker.svelte
@@ -51,6 +51,8 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="antiSelect"
   bind:this={container}
diff --git a/packages/ui/src/components/TimeShiftPopup.svelte b/packages/ui/src/components/TimeShiftPopup.svelte
index 3bc6f55a53..91e9efa238 100644
--- a/packages/ui/src/components/TimeShiftPopup.svelte
+++ b/packages/ui/src/components/TimeShiftPopup.svelte
@@ -49,6 +49,8 @@
     />
   </div>
   <div class="bottom-divider mb-2" />
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   {#each values as value}
     <div
       class="ap-menuItem"
diff --git a/packages/ui/src/components/Timeline.svelte b/packages/ui/src/components/Timeline.svelte
index 9ba95507a9..5b0e2e5b57 100644
--- a/packages/ui/src/components/Timeline.svelte
+++ b/packages/ui/src/components/Timeline.svelte
@@ -332,6 +332,7 @@
     <Scroller bind:this={scroller}>
       {#each lines as line, row}
         {@const rangeRow = time.rows ? time.rows[row] : null}
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
           class="listGrid"
           class:mListGridChecked={selectedRows.find((x) => x === row) !== undefined}
@@ -423,6 +424,7 @@
       </div>
     </div>
   {/if}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="timeline-splitter" class:moving style:left={`${panelWidth}px`} on:mousedown={splitterStart} />
 </div>
 
@@ -664,13 +666,6 @@
     .component-presenter {
       display: flex;
       align-items: center;
-
-      .space {
-        flex-shrink: 0;
-        width: 0.25rem;
-        min-width: 0.25rem;
-        max-width: 0.25rem;
-      }
     }
   }
   .timeline-action__button {
@@ -748,11 +743,6 @@
     }
   }
 
-  .filler {
-    display: flex;
-    flex-grow: 1;
-  }
-
   .gridElement {
     display: flex;
     align-items: center;
@@ -763,16 +753,4 @@
       margin-left: 0;
     }
   }
-
-  .iconPresenter {
-    padding-left: 0.45rem;
-  }
-
-  .componentPresenter {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    width: 5.5rem;
-    margin-left: 0.5rem;
-  }
 </style>
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index aeedf2d96c..cc85113de0 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -255,6 +255,7 @@
 </script>
 
 {#if $tooltip.kind === 'popup'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="modal-overlay antiOverlay"
     on:click|stopPropagation|preventDefault={() => {
diff --git a/packages/ui/src/components/calendar/DateInputBox.svelte b/packages/ui/src/components/calendar/DateInputBox.svelte
index 9d28040d92..95bbae4694 100644
--- a/packages/ui/src/components/calendar/DateInputBox.svelte
+++ b/packages/ui/src/components/calendar/DateInputBox.svelte
@@ -204,6 +204,7 @@
 <div class="datetime-input {kind}">
   <div class="flex-row-center">
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <span
       bind:this={edits[0].el}
       class="digit"
@@ -222,6 +223,7 @@
     </span>
     <span class="separator">.</span>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <span
       bind:this={edits[1].el}
       class="digit"
@@ -240,6 +242,7 @@
     </span>
     <span class="separator">.</span>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <span
       bind:this={edits[2].el}
       class="digit"
@@ -259,6 +262,7 @@
     {#if withTime}
       <div class="time-divider" />
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span
         bind:this={edits[3].el}
         class="digit"
@@ -277,6 +281,7 @@
       </span>
       <span class="separator">:</span>
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span
         bind:this={edits[4].el}
         class="digit"
@@ -298,6 +303,7 @@
   {#if currentDate}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="close-btn"
       tabindex={0}
diff --git a/packages/ui/src/components/calendar/DateRangePicker.svelte b/packages/ui/src/components/calendar/DateRangePicker.svelte
index 4c62c709a9..c06f55c482 100644
--- a/packages/ui/src/components/calendar/DateRangePicker.svelte
+++ b/packages/ui/src/components/calendar/DateRangePicker.svelte
@@ -22,7 +22,6 @@
 
   export let title: IntlString
   export let value: number | null | undefined = null
-  export let withTime: boolean = false
   export let iconModifier: 'normal' | 'warning' | 'overdue' = 'normal'
   export let labelNull: IntlString = ui.string.NoDate
 
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index f15d44f017..87a4a76b5a 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -297,7 +297,6 @@
   adaptValue()
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <button
   bind:this={datePresenter}
   class="datetime-button {kind} {size}"
@@ -311,6 +310,8 @@
 >
   {#if edit}
     {#if withDate}
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span
         bind:this={edits[0].el}
         class="digit"
@@ -330,6 +331,8 @@
         {:else}<Label label={ui.string.DD} />{/if}
       </span>
       <span class="separator">.</span>
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span
         bind:this={edits[1].el}
         class="digit"
@@ -349,6 +352,8 @@
         {:else}<Label label={ui.string.MM} />{/if}
       </span>
       <span class="separator">.</span>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <span
         bind:this={edits[2].el}
         class="digit"
@@ -372,6 +377,8 @@
       {#if mode === DateRangeMode.DATETIME}
         <div class="time-divider" />
       {/if}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <span
         bind:this={edits[3].el}
         class="digit"
@@ -391,6 +398,8 @@
         {:else}<Label label={ui.string.HH} />{/if}
       </span>
       <span class="separator">:</span>
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span
         bind:this={edits[4].el}
         class="digit"
@@ -412,6 +421,8 @@
     {/if}
     {#if value}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <div
         bind:this={closeBtn}
         class="close-btn"
diff --git a/packages/ui/src/components/calendar/Month.svelte b/packages/ui/src/components/calendar/Month.svelte
index ca687c2f43..2c2d27bff2 100644
--- a/packages/ui/src/components/calendar/Month.svelte
+++ b/packages/ui/src/components/calendar/Month.svelte
@@ -72,6 +72,8 @@
     {#if viewDate}
       <div class="monthYear">{monthYear}</div>
       <div class="group" class:hideNavigator>
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="btn"
           on:click={() => {
@@ -81,6 +83,8 @@
         >
           <div class="icon-btn"><Icon icon={IconNavPrev} size={'full'} /></div>
         </div>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
           class="btn"
           on:click={() => {
@@ -101,6 +105,8 @@
           >{capitalizeFirstLetter(getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), 'short'))}</span
         >
       {/each}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       {#each days as day, i}
         <div
           class="day {day.style}"
diff --git a/packages/ui/src/components/calendar/MonthCalendar.svelte b/packages/ui/src/components/calendar/MonthCalendar.svelte
index fb72a7ff1f..29d798d65b 100644
--- a/packages/ui/src/components/calendar/MonthCalendar.svelte
+++ b/packages/ui/src/components/calendar/MonthCalendar.svelte
@@ -57,6 +57,7 @@
       {#each [...Array(7).keys()] as dayOfWeek}
         {@const date = weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
           class="cell"
           class:weekend={isWeekend(date)}
diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte
index d634f420d0..b56724262d 100644
--- a/packages/ui/src/components/calendar/MonthSquare.svelte
+++ b/packages/ui/src/components/calendar/MonthSquare.svelte
@@ -131,6 +131,7 @@
             class:wrongMonth={wrongM}
           >
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div
               class="day"
               class:weekend={isWeekend(date)}
diff --git a/packages/ui/src/components/calendar/Shifts.svelte b/packages/ui/src/components/calendar/Shifts.svelte
index 73fdcda177..d79cfbafee 100644
--- a/packages/ui/src/components/calendar/Shifts.svelte
+++ b/packages/ui/src/components/calendar/Shifts.svelte
@@ -53,6 +53,7 @@
         {#if typeof value === 'number'}
           {@const numValue = value}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div
             class="btn"
             on:click={() => {
diff --git a/packages/ui/src/components/calendar/TimeInputBox.svelte b/packages/ui/src/components/calendar/TimeInputBox.svelte
index 164233e527..ca01f98709 100644
--- a/packages/ui/src/components/calendar/TimeInputBox.svelte
+++ b/packages/ui/src/components/calendar/TimeInputBox.svelte
@@ -170,6 +170,7 @@
 
 <div class="datetime-input {size}" class:noBorder class:disabled>
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <span
     bind:this={edits[0].el}
     class="digit"
@@ -188,6 +189,7 @@
   </span>
   <span class="separator">:</span>
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <span
     bind:this={edits[1].el}
     class="digit"
@@ -243,25 +245,6 @@
       color: var(--theme-caption-color);
     }
 
-    .close-btn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 0 0.25rem;
-      width: 0.75rem;
-      height: 0.75rem;
-      color: var(--theme-content-color);
-      background-color: var(--theme-button-default);
-      outline: none;
-      border-radius: 50%;
-      cursor: pointer;
-
-      &:hover {
-        color: var(--theme-caption-color);
-        background-color: var(--theme-button-hovered);
-      }
-    }
-
     .digit {
       position: relative;
       padding: 0 0.125rem;
@@ -285,14 +268,6 @@
       color: var(--primary-button-color);
       background-color: var(--primary-button-default);
     }
-    .time-divider {
-      flex-shrink: 0;
-      margin: 0 0.25rem;
-      width: 1px;
-      min-width: 1px;
-      height: 0.75rem;
-      background-color: var(--theme-button-border);
-    }
     .separator {
       margin: 0 0.1rem;
     }
diff --git a/packages/ui/src/components/calendar/WeekCalendar.svelte b/packages/ui/src/components/calendar/WeekCalendar.svelte
index a250f66259..fad05611f5 100644
--- a/packages/ui/src/components/calendar/WeekCalendar.svelte
+++ b/packages/ui/src/components/calendar/WeekCalendar.svelte
@@ -44,6 +44,7 @@
           {@const day = getDay(weekMonday, dayOfWeek)}
           <th>
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div
               class="cursor-pointer uppercase flex-col-center"
               class:today={areDatesEqual(todayDate, day)}
diff --git a/packages/ui/src/components/internal/ClockPopup.svelte b/packages/ui/src/components/internal/ClockPopup.svelte
index e3583c2ed7..6be5bf5489 100644
--- a/packages/ui/src/components/internal/ClockPopup.svelte
+++ b/packages/ui/src/components/internal/ClockPopup.svelte
@@ -86,6 +86,7 @@
       <ClockFace bind:timeZone={selected} size={clockSize} />
       {#if selected !== ''}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <span
           class="label overflow-label"
           style:max-width={clockSize}
diff --git a/packages/ui/src/components/internal/FontSizePopup.svelte b/packages/ui/src/components/internal/FontSizePopup.svelte
index b9e007d988..0166f0a5be 100644
--- a/packages/ui/src/components/internal/FontSizePopup.svelte
+++ b/packages/ui/src/components/internal/FontSizePopup.svelte
@@ -33,6 +33,7 @@
 <div class="antiPopup" style:flex-direction={'row'} style:padding={'12px'}>
   {#each fontsizes as font}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="statusPopup-option"
       class:selected={selected === font.id}
diff --git a/packages/ui/src/components/internal/LangPopup.svelte b/packages/ui/src/components/internal/LangPopup.svelte
index de22ccec94..688d3ce8a0 100644
--- a/packages/ui/src/components/internal/LangPopup.svelte
+++ b/packages/ui/src/components/internal/LangPopup.svelte
@@ -27,6 +27,7 @@
   <div class="ap-space x2" />
   {#each langs as lang}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="ap-menuItem hoverable flex-row-center leading-16px"
       on:click={() => {
diff --git a/packages/ui/src/components/internal/ThemePopup.svelte b/packages/ui/src/components/internal/ThemePopup.svelte
index 7c641a1c1b..4f0ea2433d 100644
--- a/packages/ui/src/components/internal/ThemePopup.svelte
+++ b/packages/ui/src/components/internal/ThemePopup.svelte
@@ -33,6 +33,7 @@
 <div class="antiPopup" style:flex-direction={'row'} style:padding={'12px'}>
   {#each themes as theme}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="statusPopup-option"
       class:selected={selected === theme.id}
diff --git a/packages/ui/src/components/internal/icons/Computer.svelte b/packages/ui/src/components/internal/icons/Computer.svelte
index e27af5d6cd..95eed55b99 100644
--- a/packages/ui/src/components/internal/icons/Computer.svelte
+++ b/packages/ui/src/components/internal/icons/Computer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  // export let size: 'small' | 'medium' | 'large'
   export let fill: string = 'currentColor'
 </script>
 
diff --git a/packages/ui/src/components/internal/icons/Phone.svelte b/packages/ui/src/components/internal/icons/Phone.svelte
index 432a2506de..33117c1a85 100644
--- a/packages/ui/src/components/internal/icons/Phone.svelte
+++ b/packages/ui/src/components/internal/icons/Phone.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  // export let size: 'small' | 'medium' | 'large'
   export let fill: string = 'currentColor'
 </script>
 
diff --git a/packages/ui/src/components/internal/icons/WiFi.svelte b/packages/ui/src/components/internal/icons/WiFi.svelte
index a9c8ab8195..f370137ca4 100644
--- a/packages/ui/src/components/internal/icons/WiFi.svelte
+++ b/packages/ui/src/components/internal/icons/WiFi.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let size: 'small' | 'medium' | 'large'
+  // export let size: 'small' | 'medium' | 'large'
   export let fill: string = 'currentColor'
 </script>
 
diff --git a/packages/ui/src/components/wizard/WizardStep.svelte b/packages/ui/src/components/wizard/WizardStep.svelte
index 709281d064..752bf54c97 100644
--- a/packages/ui/src/components/wizard/WizardStep.svelte
+++ b/packages/ui/src/components/wizard/WizardStep.svelte
@@ -57,6 +57,7 @@
   {#if lenght > 0}
     <div class="flex-row">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div bind:this={divBar} class="bar" on:click|stopPropagation>
         <svg
           bind:this={svgBack}