Some fixes for scrollable dialogs on mobile

This is 100% not going to scale to devices that are not my iPhone 14 Pro Max, but I can't get env variables working in CSS and something is better than nothing for right now.

components/common/DialogContent/index.module.scss

@@ -15,6 +15,10 @@
 
   @include breakpoint(phone) {
     place-items: flex-end;
+    overflow-y: hidden;
+
+    &.filter {
+    }
   }
 
   .dialogContent {
@@ -105,77 +109,6 @@
         overflow-y: auto;
       }
     }
-
-    &.Conflict {
-      $weapon-diameter: 14rem;
-
-      .Content {
-        display: flex;
-        flex-direction: column;
-        gap: $unit-4x;
-        padding: $unit-4x $unit-4x $unit-2x $unit-4x;
-
-        & > p {
-          font-size: $font-regular;
-          line-height: 1.4;
-
-          strong {
-            font-weight: $bold;
-          }
-
-          &:lang(ja) {
-            line-height: 1.4;
-          }
-        }
-      }
-
-      .weapon,
-      .character {
-        display: flex;
-        flex-direction: column;
-        gap: $unit;
-        text-align: center;
-        width: $weapon-diameter;
-        font-weight: $medium;
-
-        img {
-          border-radius: 1rem;
-          width: $weapon-diameter;
-          height: auto;
-        }
-
-        span {
-          line-height: 1.3;
-        }
-      }
-
-      footer {
-        display: flex;
-        flex-direction: row;
-        gap: $unit;
-
-        .Button {
-          font-size: $font-regular;
-          padding: ($unit * 1.5) ($unit * 2);
-          width: 100%;
-
-          &.btn-disabled {
-            background: $grey-90;
-            color: $grey-70;
-            cursor: not-allowed;
-          }
-
-          &:not(.btn-disabled) {
-            background: $grey-90;
-            color: $grey-50;
-
-            &:hover {
-              background: $grey-80;
-            }
-          }
-        }
-      }
-    }
   }
 
   @keyframes openModalDesktop {

components/common/DialogContent/index.tsx

@@ -11,6 +11,7 @@ interface Props
     React.DialogHTMLAttributes<HTMLDivElement>,
     HTMLDivElement
   > {
+  wrapperClassName?: string
   headerref?: React.RefObject<HTMLDivElement>
   footerref?: React.RefObject<HTMLDivElement>
   scrollable?: boolean
@@ -127,7 +128,16 @@ const DialogContent = React.forwardRef<HTMLDivElement, Props>(function Dialog(
 
   return (
     <DialogPrimitive.Portal>
-      <dialog className={styles.dialog}>
+      <dialog
+        className={classNames(
+          {
+            [styles.dialog]: true,
+          },
+          props.wrapperClassName
+            ?.split(' ')
+            .map((className) => styles[className])
+        )}
+      >
         <DialogPrimitive.Content
           {...props}
           className={classes}

components/common/DialogFooter/index.module.scss

@@ -16,4 +16,11 @@
     display: flex;
     gap: $unit;
   }
+
+  @include breakpoint(phone) {
+    position: fixed;
+    bottom: $unit-14x;
+    left: 0;
+    right: 0;
+  }
 }

components/filters/FilterModal/index.module.scss

@@ -39,5 +39,6 @@
 
   @include breakpoint(phone) {
     gap: $unit-4x;
+    margin-bottom: $unit * 24;
   }
 }

components/filters/FilterModal/index.tsx

@@ -402,7 +402,8 @@ const FilterModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
-        className="Filter"
+        className="filter"
+        wrapperClassName="filter"
         headerref={headerRef}
         footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}