fix: SASS nesting, type errors

.github/dependabot.yml

@@ -1,18 +1,18 @@
 version: 2
 updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'
     groups:
       actions-deps:
         patterns:
-          - "*"
+          - '*'
 
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
     groups:
       patch-minor:
-        update-types: ["patch", "minor"]
+        update-types: ['patch', 'minor']

src/lib/components/CoverCard.svelte

@@ -46,10 +46,12 @@
     </h2>
     <div class="artist">
       {#if cover}
-        <span class="name">{cover.artists.join(", ")}</span>
+        <span class="name">{cover.artists.join(', ')}</span>
       {/if}
       {#if original}
-        <span class="covering">covering <span class="name">{original.artists.join(", ")}</span></span>
+        <span class="covering"
+          >covering <span class="name">{original.artists.join(', ')}</span></span
+        >
       {/if}
     </div>
     {#if !isSkeleton}

src/lib/components/CoverComparison.svelte

@@ -94,17 +94,18 @@
     max-width: 100%;
     margin-inline: auto;
     padding-inline: var(--space-xl);
-    @supports (padding: max(0px)) {
-      padding-inline-start: max(var(--space-xl), env(safe-area-inset-left));
-      padding-inline-end: max(var(--space-xl), env(safe-area-inset-right));
-    }
     scroll-padding-inline: var(--space-xl);
     gap: var(--space-l);
     grid-template:
       'originalAlbum coverAlbum'
       'originalContent coverContent';
     grid-template-columns: 1fr 1fr;
 
+    @supports (padding: max(0px)) {
+      padding-inline-start: max(var(--space-xl), env(safe-area-inset-left));
+      padding-inline-end: max(var(--space-xl), env(safe-area-inset-right));
+    }
+
     @media (max-width: 480px) {
       overflow-x: scroll;
       overflow-y: hidden;
@@ -125,6 +126,7 @@
 
   .track:first-child {
     scroll-snap-align: start;
+
     @supports (animation-timeline: scroll()) {
       animation: dim linear both;
       animation-direction: normal;
@@ -134,6 +136,7 @@
 
   .track:last-child {
     scroll-snap-align: end;
+
     @supports (animation-timeline: scroll()) {
       animation: dim linear both;
       animation-direction: reverse;

src/lib/components/Footer.svelte

@@ -42,18 +42,19 @@
     width: 100%;
     padding-inline: var(--space-m);
     padding-block: var(--space-l);
-    @supports (padding: max(0px)) {
-      padding-inline-start: max(var(--space-m), env(safe-area-inset-left));
-      padding-inline-end: max(var(--space-m), env(safe-area-inset-right));
-      padding-block-end: max(var(--space-l), env(safe-area-inset-bottom));
-    }
     display: grid;
     grid-template-areas: 'nav toggle';
     grid-template-columns: 1fr fit-content(64px);
     align-items: center;
     row-gap: var(--space-l);
     z-index: 0;
 
+    @supports (padding: max(0px)) {
+      padding-inline-start: max(var(--space-m), env(safe-area-inset-left));
+      padding-inline-end: max(var(--space-m), env(safe-area-inset-right));
+      padding-block-end: max(var(--space-l), env(safe-area-inset-bottom));
+    }
+
     a {
       font-weight: var(--font-weight-bold);
       text-decoration: underline;

src/routes/cover/[slug]/+page.svelte

@@ -125,15 +125,15 @@
     padding-block-start: var(--space-xl);
     padding-block-end: var(--space-3xl);
     padding-inline: var(--space-l);
-    @supports (padding: max(0px)) {
-      padding-inline-start: max(var(--space-l), env(safe-area-inset-left));
-      padding-inline-end: max(var(--space-l), env(safe-area-inset-right));
-    }
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     text-wrap: balance;
+    @supports (padding: max(0px)) {
+      padding-inline-start: max(var(--space-l), env(safe-area-inset-left));
+      padding-inline-end: max(var(--space-l), env(safe-area-inset-right));
+    }
   }
 
   .title {
@@ -152,7 +152,7 @@
   .artist {
     color: var(--mauve-12);
 
-    @media (hover: hover) {   
+    @media (hover: hover) {
       &:hover {
         text-decoration: underline;
         text-decoration-color: var(--mauve-9);

src/routes/new/+page.svelte

@@ -97,8 +97,6 @@
           use:autosize
           name="description"
           class="input"
-          minRows={2}
-          maxRows={4}
           placeholder="What’s different about this cover?"
         />
         <div