Fix Conflict modals and make scrollable

components/CharacterConflictModal/index.tsx

@@ -30,6 +30,9 @@ const CharacterConflictModal = (props: Props) => {
   // States
   const [open, setOpen] = useState(false)
 
+  // Refs
+  const footerRef = React.createRef<HTMLDivElement>()
+
   useEffect(() => {
     setOpen(props.open)
   }, [setOpen, props.open])
@@ -73,9 +76,11 @@ const CharacterConflictModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="Conflict"
+        footerref={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >
+        <div className="Content">
           <p>
             <Trans i18nKey="modals.conflict.character"></Trans>
           </p>
@@ -102,13 +107,21 @@ const CharacterConflictModal = (props: Props) => {
               </div>
             </div>
           </div>
-        <footer>
+        </div>
-          <Button onClick={close} text={t('buttons.cancel')} />
+        <div className="DialogFooter" ref={footerRef}>
+          <div className="Buttons Span">
             <Button
+              contained={true}
+              onClick={close}
+              text={t('buttons.cancel')}
+            />
+            <Button
+              contained={true}
               onClick={props.resolveConflict}
               text={t('modals.conflict.buttons.confirm')}
             />
-        </footer>
+          </div>
+        </div>
       </DialogContent>
       <Overlay open={open} visible={true} />
     </Dialog>

components/DialogContent/index.scss

@@ -149,6 +149,19 @@
       flex-direction: column;
       padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
       position: sticky;
+
+      .Buttons {
+        display: flex;
+        gap: $unit;
+
+        &.Span {
+          width: 100%;
+
+          .Button {
+            width: 100%;
+          }
+        }
+      }
     }
 
     .actions {
@@ -160,9 +173,15 @@
     &.Conflict {
       $weapon-diameter: 14rem;
 
+      .Content {
+        display: flex;
+        flex-direction: column;
+        gap: $unit-4x;
+        padding: $unit-4x $unit-4x $unit-2x $unit-4x;
+
         & > p {
-        line-height: 1.2;
+          font-size: $font-regular;
-        max-width: 400px;
+          line-height: 1.4;
 
           strong {
             font-weight: $bold;
@@ -172,6 +191,7 @@
             line-height: 1.4;
           }
         }
+      }
 
       .weapon,
       .character {

components/DialogContent/index.tsx

@@ -11,7 +11,7 @@ interface Props
     React.DialogHTMLAttributes<HTMLDivElement>,
     HTMLDivElement
   > {
-  headerref: React.RefObject<HTMLDivElement>
+  headerref?: React.RefObject<HTMLDivElement>
   footerref?: React.RefObject<HTMLDivElement>
   onEscapeKeyDown: (event: KeyboardEvent) => void
   onOpenAutoFocus: (event: Event) => void

components/WeaponConflictModal/index.tsx

@@ -30,6 +30,9 @@ const WeaponConflictModal = (props: Props) => {
   // States
   const [open, setOpen] = useState(false)
 
+  // Refs
+  const footerRef = React.createRef<HTMLDivElement>()
+
   useEffect(() => {
     setOpen(props.open)
   }, [setOpen, props.open])
@@ -67,9 +70,11 @@ const WeaponConflictModal = (props: Props) => {
     <Dialog open={open} onOpenChange={openChange}>
       <DialogContent
         className="Conflict"
+        footerref={footerRef}
         onOpenAutoFocus={(event) => event.preventDefault()}
         onEscapeKeyDown={close}
       >
+        <div className="Content">
           <p>{infoString()}</p>
           <div className="WeaponDiagram Diagram">
             <ul>
@@ -94,13 +99,21 @@ const WeaponConflictModal = (props: Props) => {
               </div>
             </div>
           </div>
-        <footer>
+        </div>
-          <Button onClick={close} text={t('buttons.cancel')} />
+        <div className="DialogFooter" ref={footerRef}>
+          <div className="Buttons Span">
             <Button
+              contained={true}
+              onClick={close}
+              text={t('buttons.cancel')}
+            />
+            <Button
+              contained={true}
               onClick={props.resolveConflict}
               text={t('modals.conflict.buttons.confirm')}
             />
-        </footer>
+          </div>
+        </div>
       </DialogContent>
       <Overlay open={open} visible={true} />
     </Dialog>