fix: fix modal dialog width (#1152)

fixes #1151

src/routes/_components/dialog/components/AccountProfileOptionsDialog.html

@@ -2,6 +2,7 @@
   {id}
   {label}
   {title}
+  shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
   <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>

src/routes/_components/dialog/components/CopyDialog.html

@@ -2,6 +2,7 @@
   {id}
   {label}
   {title}
+  shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
   <form class="copy-dialog-form">

src/routes/_components/dialog/components/EmojiDialog.html

@@ -2,6 +2,7 @@
   {id}
   {label}
   {title}
+  shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
   <div class="emoji-container" {style} ref:container >

src/routes/_components/dialog/components/GenericConfirmationDialog.html

@@ -3,6 +3,7 @@
   {label}
   {title}
   {className}
+  shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
   <form class="confirmation-dialog-form">

src/routes/_components/dialog/components/ModalDialog.html

@@ -136,6 +136,14 @@
       height: 18px;
     }
   }
+
+  @media(min-width: 768px) {
+    /* On desktop, some dialogs look bad if they expand to fit all the way. So we shrink
+       them to fit if shrinkWidthToFit is true.*/
+    .modal-dialog-contents.shrink-width-to-fit {
+      flex: none;
+    }
+  }
 </style>
 <script>
   import Shortcut from '../../shortcut/Shortcut.html'
@@ -181,7 +189,8 @@
       fadedIn: false,
       muted: false,
       className: void 0,
-      title: void 0
+      title: void 0,
+      shrinkWidthToFit: false
     }),
     computed: {
       backdropClass: ({ fadedIn, shouldAnimate }) => {
@@ -191,12 +200,13 @@
           shouldAnimate && 'should-animate'
         )
       },
-      contentsClass: ({ fadedIn, muted, shouldAnimate, className }) => {
+      contentsClass: ({ fadedIn, muted, shouldAnimate, shrinkWidthToFit, className }) => {
         return classname(
           'modal-dialog-contents',
           !fadedIn && 'hidden',
           muted && 'muted-style',
           shouldAnimate && 'should-animate',
+          shrinkWidthToFit && 'shrink-width-to-fit',
           className
         )
       }

src/routes/_components/dialog/components/PostPrivacyDialog.html

@@ -2,6 +2,7 @@
   {id}
   {label}
   {title}
+  shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
   <GenericDialogList selectable={true} {items} on:click="onClick(event)" />
@@ -53,4 +54,4 @@
       }
     }
   }
-</script>
+</script>

src/routes/_components/dialog/components/StatusOptionsDialog.html

@@ -2,6 +2,7 @@
   {id}
   {label}
   {title}
+  shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
   <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>