fix overflow inside of modals (#432)

fixes #431

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'

routes/_components/dialog/components/GenericDialogList.html

@@ -5,12 +5,14 @@
       <svg class="generic-dialog-list-item-svg">
         <use xlink:href={item.icon} />
       </svg>
-      <span>
+      <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>

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'

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'