fix: Manage the width to take scrollbars into account (#1138)

* Manage the width to take scrollbars into account

* Additional modal layout styles changes

src/routes/_components/compose/ComposeAutosuggest.html

@@ -16,7 +16,7 @@
     opacity: 0;
     transition: opacity 0.1s linear;
     min-width: 400px;
-    max-width: calc(100vw - 20px);
+    max-width: calc(100% - 20px);
     z-index: 7000;
   }
   .compose-autosuggest.is-dialog {

src/routes/_components/compose/ComposeBox.html

@@ -39,19 +39,12 @@
       "avatar toolbar    toolbar   length"
       "avatar media      media     media";
     grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
-    width: 560px;
-    max-width: calc(100vw - 40px);
   }
 
   .compose-box.direct-reply {
     background-color: var(--status-direct-background);
   }
 
-  .compose-box.slim-size {
-    width: 540px;
-    max-width: calc(100vw - 60px);
-  }
-
   .compose-box-fade-in {
     transition: opacity 0.2s linear; /* main page reveal */
   }
@@ -69,13 +62,6 @@
   @media (max-width: 767px) {
     .compose-box {
       padding: 10px 10px 0 10px;
-      max-width: calc(100vw - 20px);
-      width: 580px;
-    }
-
-    .compose-box.slim-size {
-      width: 560px;
-      max-width: calc(100vw - 40px);
     }
 
     .compose-box-realm-dialog {
@@ -142,7 +128,6 @@
         'compose-box',
         `compose-box-realm-${realm}`,
         overLimit && 'over-char-limit',
-        size === 'slim' && 'slim-size',
         isReply && postPrivacyKey === 'direct' && 'direct-reply'
       )),
       hideAndFadeIn: ({ hidden }) => (classname(

src/routes/_components/compose/ComposeFileDrop.html

@@ -11,6 +11,8 @@
   .file-drop {
     display: block;
     position: relative;
+    max-width: 100%;
+    width: 100%;
   }
 
   .file-drop-info {

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

@@ -4,7 +4,7 @@
   {title}
   background="var(--main-bg)"
 >
-  <ComposeBox realm="dialog" size="slim" autoFocus="true" />
+  <ComposeBox realm="dialog" autoFocus="true" />
 </ModalDialog>
 <script>
   import ModalDialog from './ModalDialog.html'

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

@@ -21,7 +21,7 @@
     grid-gap: 10px;
     padding: 10px 20px;
     width: 400px;
-    max-width: calc(100vw - 40px);
+    max-width: calc(100% - 40px);
   }
 </style>
 <script>

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

@@ -21,7 +21,6 @@
     border: 1px solid var(--settings-list-item-border);
     box-sizing: border-box;
     min-width: 350px;
-    max-width: calc(100vw - 20px);
   }
   .generic-dialog-list-item {
     border: 1px solid var(--settings-list-item-border);
@@ -69,7 +68,7 @@
 
   @media (max-width: 479px) {
     .generic-dialog-list {
-      min-width: calc(100vw - 20px);
+      min-width: calc(100% - 20px);
     }
     .generic-dialog-list-button {
       padding: 15px 10px;

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

@@ -79,7 +79,7 @@
 <Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
 <style>
   :global(.media-modal-dialog) {
-    max-width: calc(100vw);
+    max-width: calc(100%);
   }
   .media-container {
     height: calc(100% - 64px); /* 44px X button height + 20px padding */

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

@@ -59,6 +59,8 @@
     display: flex;
     flex-direction: row;
     max-height: calc(100% - 20px);
+    max-width: calc(100% - 20px);
+    flex: 0 1 580px;
   }
   .modal-dialog-contents.should-animate {
     transition: opacity 0.2s linear;
@@ -69,7 +71,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    max-width: calc(100vw - 20px);
+    width: 100%;
+    max-width: 100%;
     flex: 1;
   }
   .modal-dialog-header {

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

@@ -129,7 +129,7 @@
       word-wrap: break-word;
     }
     :global(.report-dialog-contents .confirmation-dialog-form) {
-      max-width: calc(100vw - 20px);
+      max-width: calc(100% - 20px);
     }
   }
 </style>

src/routes/_components/status/MediaAttachments.html

@@ -15,7 +15,6 @@
     grid-row-gap: 5px;
 
     overflow: hidden;
-    max-width: calc(100vw - 40px);
     margin: 10px 10px 10px 5px;
   }
 

src/routes/_components/status/Status.html

@@ -47,7 +47,6 @@
 
 <style>
   .status-article {
-    max-width: calc(100vw - 40px);
     padding: 10px 20px;
     display: grid;
     grid-template-areas:
@@ -71,7 +70,6 @@
   }
 
   .status-article.status-in-timeline {
-    width: 560px;
     border-bottom: 1px solid var(--main-border);
   }
 
@@ -104,10 +102,6 @@
   @media (max-width: 767px) {
     .status-article {
       padding: 10px 10px;
-      max-width: calc(100vw - 20px);
-    }
-    .status-article.status-in-timeline {
-      width: 580px;
     }
   }
 </style>

src/routes/_components/status/StatusCard.html

@@ -27,7 +27,6 @@
     color: inherit;
 
     overflow: hidden;
-    max-width: calc(100vw - 40px);
     margin: 10px 10px 10px 5px;
 
     border: 1px solid var(--settings-list-item-border);

src/routes/_components/status/StatusComposeBox.html

@@ -1,6 +1,5 @@
 <div class="status-article-compose-box">
   <ComposeBox realm={originalStatusId}
-              size="slim"
               autoFocus="true"
               hideBottomBorder="true"
               isReply="true"
@@ -12,6 +11,7 @@
 <style>
   .status-article-compose-box {
     grid-area: compose;
+    max-width: 100%;
   }
 </style>
 <script>

src/routes/_components/virtualList/VirtualList.html

@@ -21,6 +21,7 @@
 <style>
   .virtual-list {
     position: relative;
+    width: 100%;
   }
 </style>
 <script>

src/routes/_components/virtualList/VirtualListItem.html

@@ -12,6 +12,7 @@
 <style>
   .virtual-list-item {
     position: absolute;
+    width: 100%;
     top: 0;
     opacity: 0;
     pointer-events: none;

src/scss/global.scss

@@ -52,7 +52,9 @@ body {
 main {
   position: relative;
   width: 602px;
-  max-width: 100vw;
+  // take into account scrollbars;
+  // https://stackoverflow.com/a/34884924
+  max-width: 100%;
   padding: 0;
   box-sizing: border-box;
   margin: 30px auto 15px;