Add some support for foldable devices

src/UI/Base/ModalRight.svelte

@@ -16,6 +16,7 @@
   role="dialog"
   style="max-width: 100vw; max-height: 100vh"
   tabindex="-1"
+  id="modal-right"
   use:trapFocus
 >
   <slot name="close-button">
@@ -30,3 +31,12 @@
     <slot />
   </div>
 </div>
+
+<!-- Experimental support for foldable devices -->
+<style lang="scss">
+  @media (horizontal-viewport-segments: 2) {
+    #modal-right {
+      width: 50%;
+    }
+  }
+</style>

src/UI/BigComponents/ThemesList.svelte

@@ -24,7 +24,7 @@
 
 <section class="w-full">
   <slot name="title" />
-  <div class="gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
+  <div class="theme-list gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
     {#each filteredThemes as theme (theme.id)}
       {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
         <!-- TODO: doesn't work if first theme is hidden -->