From 79184570b1ff6d559b926282027a15616dde40f8 Mon Sep 17 00:00:00 2001 From: sgenoud Date: Sat, 13 Apr 2019 20:02:25 +0200 Subject: [PATCH] fix: Manage the width to take scrollbars into account (#1138) * Manage the width to take scrollbars into account * Additional modal layout styles changes --- .../_components/compose/ComposeAutosuggest.html | 2 +- src/routes/_components/compose/ComposeBox.html | 15 --------------- .../_components/compose/ComposeFileDrop.html | 2 ++ .../dialog/components/ComposeDialog.html | 4 ++-- .../_components/dialog/components/CopyDialog.html | 2 +- .../dialog/components/GenericDialogList.html | 3 +-- .../dialog/components/MediaDialog.html | 2 +- .../dialog/components/ModalDialog.html | 5 ++++- .../dialog/components/ReportDialog.html | 2 +- .../_components/status/MediaAttachments.html | 1 - src/routes/_components/status/Status.html | 6 ------ src/routes/_components/status/StatusCard.html | 1 - .../_components/status/StatusComposeBox.html | 2 +- .../_components/virtualList/VirtualList.html | 1 + .../_components/virtualList/VirtualListItem.html | 1 + src/scss/global.scss | 4 +++- 16 files changed, 19 insertions(+), 34 deletions(-) diff --git a/src/routes/_components/compose/ComposeAutosuggest.html b/src/routes/_components/compose/ComposeAutosuggest.html index 5dda60b..f2a04e3 100644 --- a/src/routes/_components/compose/ComposeAutosuggest.html +++ b/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 { diff --git a/src/routes/_components/compose/ComposeBox.html b/src/routes/_components/compose/ComposeBox.html index da5a726..20487c0 100644 --- a/src/routes/_components/compose/ComposeBox.html +++ b/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( diff --git a/src/routes/_components/compose/ComposeFileDrop.html b/src/routes/_components/compose/ComposeFileDrop.html index 9cb5cb3..0112598 100644 --- a/src/routes/_components/compose/ComposeFileDrop.html +++ b/src/routes/_components/compose/ComposeFileDrop.html @@ -11,6 +11,8 @@ .file-drop { display: block; position: relative; + max-width: 100%; + width: 100%; } .file-drop-info { diff --git a/src/routes/_components/dialog/components/ComposeDialog.html b/src/routes/_components/dialog/components/ComposeDialog.html index 41cc794..78415fc 100644 --- a/src/routes/_components/dialog/components/ComposeDialog.html +++ b/src/routes/_components/dialog/components/ComposeDialog.html @@ -4,7 +4,7 @@ {title} background="var(--main-bg)" > - + \ No newline at end of file + diff --git a/src/routes/_components/dialog/components/CopyDialog.html b/src/routes/_components/dialog/components/CopyDialog.html index 6150762..7f16609 100644 --- a/src/routes/_components/dialog/components/CopyDialog.html +++ b/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); }