From 1be5fd3672c7c8aa761405742685f45b7d6fea49 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 17 Aug 2018 22:26:08 -0700
Subject: [PATCH] fix overflow inside of modals (#432)

fixes #431
---
 .../AccountProfileOptionsDialog.html          |  2 +-
 .../dialog/components/GenericDialogList.html  | 36 ++++++++++++++-----
 .../dialog/components/PostPrivacyDialog.html  |  2 +-
 .../components/StatusOptionsDialog.html       |  2 +-
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/routes/_components/dialog/components/AccountProfileOptionsDialog.html b/routes/_components/dialog/components/AccountProfileOptionsDialog.html
index 91a2f25..1e884e3 100644
--- a/routes/_components/dialog/components/AccountProfileOptionsDialog.html
+++ b/routes/_components/dialog/components/AccountProfileOptionsDialog.html
@@ -4,7 +4,7 @@
   {title}
   background="var(--main-bg)"
 >
-  <GenericDialogList {items} on:click="onClick(event)"/>
+  <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>
 </ModalDialog>
 <script>
 import ModalDialog from './ModalDialog.html'
diff --git a/routes/_components/dialog/components/GenericDialogList.html b/routes/_components/dialog/components/GenericDialogList.html
index 7af4c01..2323d3b 100644
--- a/routes/_components/dialog/components/GenericDialogList.html
+++ b/routes/_components/dialog/components/GenericDialogList.html
@@ -5,12 +5,14 @@
       <svg class="generic-dialog-list-item-svg">
         <use xlink:href={item.icon} />
       </svg>
-      <span>
-            {item.label}
-          </span>
-      <svg class="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}" aria-hidden={!item.selected}>
-        <use xlink:href="#fa-check" />
-      </svg>
+      <span class="generic-dialog-list-button-span">
+        {item.label}
+      </span>
+      {#if selectable}
+        <svg class="generic-dialog-list-item-svg {item.selected ? '' : 'hidden'}" aria-hidden={!item.selected}>
+          <use xlink:href="#fa-check" />
+        </svg>
+      {/if}
     </button>
   </li>
   {/each}
@@ -21,7 +23,7 @@
     width: 100%;
     border: 1px solid var(--settings-list-item-border);
     box-sizing: border-box;
-    min-width: 300px;
+    min-width: 350px;
     max-width: calc(100vw - 20px);
   }
   .generic-dialog-list-item {
@@ -43,10 +45,14 @@
     display: flex;
     flex-direction: row;
   }
-  .generic-dialog-list-button span {
+  .generic-dialog-list-button-span {
     flex: 1;
-    text-align: left;
     margin-left: 20px;
+    text-align: left;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
   .generic-dialog-list-button:hover {
     background: var(--settings-list-item-bg-hover);
@@ -54,4 +60,16 @@
   .generic-dialog-list-button:active {
     background: var(--settings-list-item-bg-active);
   }
+
+  @media (max-width: 767px) {
+    .generic-dialog-list {
+      min-width: calc(100vw - 20px);
+    }
+    .generic-dialog-list-button {
+      padding: 20px 10px;
+    }
+    .generic-dialog-list-button-span {
+      margin-left: 10px;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/routes/_components/dialog/components/PostPrivacyDialog.html b/routes/_components/dialog/components/PostPrivacyDialog.html
index ed99ec8..e04ddda 100644
--- a/routes/_components/dialog/components/PostPrivacyDialog.html
+++ b/routes/_components/dialog/components/PostPrivacyDialog.html
@@ -4,7 +4,7 @@
   {title}
   background="var(--main-bg)"
 >
-  <GenericDialogList {items} on:click="onClick(event)" />
+  <GenericDialogList selectable={true} {items} on:click="onClick(event)" />
 </ModalDialog>
 <script>
   import ModalDialog from './ModalDialog.html'
diff --git a/routes/_components/dialog/components/StatusOptionsDialog.html b/routes/_components/dialog/components/StatusOptionsDialog.html
index f618cc4..91e6257 100644
--- a/routes/_components/dialog/components/StatusOptionsDialog.html
+++ b/routes/_components/dialog/components/StatusOptionsDialog.html
@@ -4,7 +4,7 @@
   {title}
   background="var(--main-bg)"
 >
-  <GenericDialogList {items} on:click="onClick(event)"/>
+  <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>
 </ModalDialog>
 <script>
 import ModalDialog from './ModalDialog.html'