From ddd95aad2757b0658ad4add0e4cb5cb11c4035e6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 14 Apr 2019 14:09:10 -0700
Subject: [PATCH] fix: fix modal dialog width (#1152)

fixes #1151
---
 .../components/AccountProfileOptionsDialog.html    |  1 +
 .../_components/dialog/components/CopyDialog.html  |  1 +
 .../_components/dialog/components/EmojiDialog.html |  1 +
 .../components/GenericConfirmationDialog.html      |  1 +
 .../_components/dialog/components/ModalDialog.html | 14 ++++++++++++--
 .../dialog/components/PostPrivacyDialog.html       |  3 ++-
 .../dialog/components/StatusOptionsDialog.html     |  1 +
 7 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/routes/_components/dialog/components/AccountProfileOptionsDialog.html b/src/routes/_components/dialog/components/AccountProfileOptionsDialog.html
index b7ce5cd2..e476350c 100644
--- a/src/routes/_components/dialog/components/AccountProfileOptionsDialog.html
+++ b/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)"/>
diff --git a/src/routes/_components/dialog/components/CopyDialog.html b/src/routes/_components/dialog/components/CopyDialog.html
index 7f166095..768f0419 100644
--- a/src/routes/_components/dialog/components/CopyDialog.html
+++ b/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">
diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index 1a4c6c14..4e9f9cd8 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/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 >
diff --git a/src/routes/_components/dialog/components/GenericConfirmationDialog.html b/src/routes/_components/dialog/components/GenericConfirmationDialog.html
index c6b8c570..0b2980ac 100644
--- a/src/routes/_components/dialog/components/GenericConfirmationDialog.html
+++ b/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">
diff --git a/src/routes/_components/dialog/components/ModalDialog.html b/src/routes/_components/dialog/components/ModalDialog.html
index 48745e59..aed8309f 100644
--- a/src/routes/_components/dialog/components/ModalDialog.html
+++ b/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
         )
       }
diff --git a/src/routes/_components/dialog/components/PostPrivacyDialog.html b/src/routes/_components/dialog/components/PostPrivacyDialog.html
index e04ddda1..31310b34 100644
--- a/src/routes/_components/dialog/components/PostPrivacyDialog.html
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/dialog/components/StatusOptionsDialog.html b/src/routes/_components/dialog/components/StatusOptionsDialog.html
index cf3b5355..a869ad23 100644
--- a/src/routes/_components/dialog/components/StatusOptionsDialog.html
+++ b/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)"/>