Mobile hotfix

components/Dialog/index.scss

@@ -22,6 +22,12 @@
     text-decoration: underline;
   }
 
+  @media (max-width: $phone) {
+    min-width: inherit;
+    min-height: inherit;
+    width: 100%;
+  }
+
   .DialogHeader {
     display: flex;
     align-items: center;

components/PartySegmentedControl/index.scss

@@ -1,5 +1,6 @@
 .PartyNavigation {
   align-items: center;
+  box-sizing: border-box;
   display: flex;
   gap: 58px;
   justify-content: center;
@@ -22,6 +23,13 @@
 
     .SegmentedControl {
       flex-grow: 1;
+
+      @media (max-width: $phone) {
+        flex-grow: 1;
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto auto auto;
+      }
     }
   }
 }

components/SearchFilter/index.scss

@@ -8,8 +8,14 @@ button.DropdownLabel {
   font-size: $font-small;
   gap: $unit-half;
   flex-direction: row;
+  justify-content: space-between;
   padding: $unit ($unit * 1.5) $unit $unit-2x;
 
+  div {
+    display: flex;
+    gap: $unit-half;
+  }
+
   &:hover {
     background: var(--button-contained-bg-hover);
     color: var(--text-primary);

components/SearchFilter/index.tsx

@@ -17,8 +17,10 @@ const SearchFilter = (props: Props) => {
   return (
     <DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
       <DropdownMenu.Trigger className="DropdownLabel">
-        {props.label}
+        <div>
-        <span className="count">{props.numSelected}</span>
+          {props.label}
+          <span className="count">{props.numSelected}</span>
+        </div>
         <span className="icon">
           <ArrowIcon />
         </span>

components/SearchModal/index.scss

@@ -1,4 +1,5 @@
 .Search.Dialog {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   min-height: 431px;
@@ -7,6 +8,13 @@
   gap: 0;
   padding: 0;
 
+  @media (max-width: $phone) {
+    min-width: inherit;
+    min-height: inherit;
+    width: 96%; // is this even right
+    height: 96vh;
+  }
+
   #Header {
     border-bottom: 1px solid transparent;
     display: flex;
@@ -60,6 +68,10 @@
     padding: 0 ($unit * 1.5);
     overflow-y: scroll;
 
+    @media (max-width: $phone) {
+      max-height: inherit;
+    }
+
     h5.total {
       font-size: $font-regular;
       font-weight: $normal;

components/Segment/index.scss

@@ -35,6 +35,7 @@
   }
 
   @media (max-width: $phone) {
-    min-width: auto;
+    min-width: initial;
+    width: 100%;
   }
 }

components/SummonGrid/index.scss

@@ -10,6 +10,15 @@
     font-weight: $medium;
     margin-bottom: $unit;
     text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    @media (max-width: $phone) {
+      &.Friend {
+        max-width: 78px;
+      }
+    }
   }
 
   #grid_summons {

components/SummonGrid/index.tsx

@@ -232,7 +232,7 @@ const SummonGrid = (props: Props) => {
 
   const friendSummonElement = (
     <div className="LabeledUnit">
-      <div className="Label">{t('summons.friend')}</div>
+      <div className="Label Friend">{t('summons.friend')}</div>
       <SummonUnit
         gridSummon={grid.summons.friendSummon}
         editable={party.editable}

styles/globals.scss

@@ -290,6 +290,12 @@ i.tag {
   display: flex;
   gap: $unit;
   padding: 0 ($unit * 3);
+
+  @media (max-width: $phone) {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 @keyframes openModal {