.composer-popup-container { display: none !important; // can be removed if inline JS CSS is removed from composer-popup } .composer-popup { display: none !important; // can be removed if inline JS CSS is removed from composer-popup } #reply-control { z-index: z("mobile-composer"); .reply-area { padding: 6px; padding-bottom: unquote("max(env(safe-area-inset-bottom), 6px)"); flex-grow: 1; } &.open { height: 250px; &.edit-title { height: 100%; } } .keyboard-visible &.open { height: 100%; // Android: Reduces composer jumpiness when the keyboard toggles } .keyboard-visible body.ios-safari-composer-hacks &.open { height: calc(var(--composer-vh, 1vh) * 100); .reply-area { padding-bottom: 6px; } } // Firefox for Android hack @supports (-moz-appearance: none) { .keyboard-visible #reply-control.open { position: sticky; height: calc(100vh - var(--header-offset, 4em)); } } .reply-to { justify-content: space-between; margin-bottom: 6px; .reply-details { max-width: calc(100% - 75px); } // Protection for languages with long strings on very small screens. This // has no effect on most users but we need it for some cases. If this is // not added, "add edit reason" will overlap with the composer controls @include breakpoint(mobile-small) { .reply-details { flex-wrap: wrap; } .display-edit-reason { margin-top: 0.5em; } .composer-controls { align-self: flex-start; gap: 6px; } } } .toggle-minimize { .d-icon-chevron-down { vertical-align: text-top; } } &.draft { z-index: z("footer-nav") + 1; padding-bottom: env(safe-area-inset-bottom); .toggle-toolbar, .toggle-minimize { top: 6px; } .draft-text { width: calc(100% - 40px); @include ellipsis; } } #reply-title { width: calc(100% - 20px); margin-bottom: 6px; } .category-input, .with-tags .category-input { margin-bottom: 6px; max-width: calc(50% - 3px); } .submit-panel { margin-top: 6px; flex-wrap: wrap; gap: 0.25em 0; .create { max-width: 50vw; span { @include ellipsis; } } .save-or-cancel { margin-right: 0.5em; flex: 1 1 auto; #draft-status, #file-uploading { margin-left: 6px; } .cancel { font-size: 1.4em; color: var(--primary-low-mid); margin-left: 0.6em; padding: 3px 6px; } } .mobile-file-upload:not(.hidden), .mobile-preview { // Alignment fix, remove if converted to buttons display: inline-flex; } .mobile-file-upload { &.hidden + .mobile-preview { // Hide preview button while file is uploading to make room for upload progress display: none; } } .mobile-preview { margin-left: 0.25em; } } &.show-preview { .submit-panel { padding-top: 10px; z-index: z("fullscreen") + 1; background-color: var(--secondary); .cancel, .mobile-file-upload, .mobile-preview { display: none; } } .d-editor-preview-wrapper { position: fixed; z-index: z("fullscreen"); top: 0; bottom: 0; left: 0; right: 0; background-color: var(--secondary); border-bottom: 40px solid var(--secondary); max-width: 100%; margin: 0; padding: 10px; overflow: auto; .d-editor-preview { margin-bottom: 40px; } } } &.hide-preview { .d-editor-preview-wrapper { display: none; } } .wmd-controls:not(.toolbar-visible) { .d-editor-button-bar { display: none; } } .d-editor-button-bar .btn { &.preview { margin: 0; } } .title-and-category, .user-selector { margin: 0; .users-input { margin-bottom: 6px; } } .with-tags { .mini-tag-chooser, .category-chooser { z-index: z("base"); } .mini-tag-chooser { margin: 0 0 6px 6px; max-width: calc(50% - 3px); } .selected-name { .name { font-size: var(--font-down-1); .badge-wrapper { font-size: var(--font-0); } } } .formatted-selection { font-size: var(--font-down-1); } } .without-tags { .category-input { margin-left: 6px; } } .user-selector { flex-wrap: wrap; } .users-input, .add-warning { width: 100%; } .users-input .select-kit.multi-select { width: 100%; } .add-warning { margin-bottom: 6px; } .whisper { margin-right: 6px; } }