/* ========================================================================== Report generation modal -------------------------------------------------------------------------- Styles the single contact-capture modal built by report_request_modal() in R/cityviz_utils_report_request.R, shown by Building Permits, Economic Indicators, Report Studio and Community Profile. Loaded globally from golem_add_external_resources() (R/app_ui.R), which brochure applies to every route including /embed, so the modal looks the same inside an embedded widget iframe. Everything is scoped to .report-request-modal / .report-request-dialog and prefixed rr-, so it cannot collide with the .format-card / .format-icon / .format-name classes report-studio-redesign.css defines for Report Studio's on-page picker. Two colours arrive as custom properties set inline on .modal-content: --rr-accent the client's brand colour (config$style$brand_primary) --rr-accent-soft the same colour at 8% alpha Metrics: 720px wide, 24px of content padding, 20px between sections, 44px controls. ========================================================================== */ /* --- Stacking ------------------------------------------------------------- */ /* Shiny already appends #shiny-modal to , so the modal is not trapped in a lower stacking context — it is simply outranked. cityviz.css:249 gives .navbar-expand-xl `position: relative; z-index: 2000` and cityviz.css:1308 gives .ticker-wrap `z-index: 10000`, both above Bootstrap's 1055/1050, so the navigation painted over the top of the dialog. The body class is added and removed by the inline script in the modal body, which keeps the lift scoped to this modal: every other showModal() in the app keeps Bootstrap's ordering. `body` + the id beats Bootstrap's `.modal` and `.modal-backdrop` on specificity without !important. */ body.rr-modal-open .modal-backdrop { z-index: 10050; } body.rr-modal-open #shiny-modal { z-index: 10060; } /* --- Shell ---------------------------------------------------------------- */ /* Two classes, because cityviz.css:4036 sets .modal-dialog { margin-top: 100px } and responsive.css:231 sets body .modal-dialog { margin: 20px 10px }. */ .modal-dialog.report-request-dialog { max-width: 720px; margin: 1rem auto; } .report-request-modal { border: none; border-top: 3px solid var(--rr-accent, #893448); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #3E4C59; /* Short screens scroll the body rather than pushing the footer off under the fixed navigation. dvh first-with-fallback: vh alone jumps as mobile browser chrome hides. .modal-content is already a flex column in Bootstrap 5, so capping it here is all the body's overflow rule needs. */ max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } /* --- Header --------------------------------------------------------------- */ /* Title, badge and supporting text share the header. Overrides the global .modal-header { padding-top: 0; padding-bottom: 0 }. Right padding clears the absolutely positioned close button so a long report name wraps above it rather than running underneath. */ .report-request-modal .modal-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; padding: 1.25rem 3.25rem 1.15rem 1.5rem; border-bottom: 1px solid #ece9e3; } .report-request-modal .modal-title { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: #1F2933; } .report-request-modal .rr-title-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rr-accent-soft, rgba(0, 0, 0, 0.05)); color: var(--rr-accent, #893448); font-size: 1rem; } /* Full-width second row, indented to line up under the title text. */ .report-request-modal .rr-subtitle { flex: 0 0 100%; margin: 0.3rem 0 0; padding-left: 3rem; font-size: 0.9rem; line-height: 1.45; color: #52606D; } .report-request-modal .rr-close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: #7B8794; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .report-request-modal .rr-close:hover { background: #f1efeb; color: #1F2933; } .report-request-modal .rr-close:focus-visible { outline: 2px solid var(--rr-accent, #893448); outline-offset: 2px; } /* --- Body ----------------------------------------------------------------- */ .report-request-modal .modal-body { padding: 1.5rem; overflow-y: auto; } .report-request-modal .rr-section { margin-bottom: 1.25rem; } /* Shiny's own stylesheet caps every .shiny-input-container at 300px. The text inputs escape it because they are built with width = "100%", but the format radiogroup and the consent checkbox would otherwise be boxed into a third of the modal — with the format cards' contents spilling out of their borders. */ .report-request-modal .shiny-input-container { width: 100%; max-width: 100%; } /* Section headings and the format picker's own share one look; so does the email label, via .rr-label-strong further down — that rule has to come after .rr-label, which matches the same element at equal specificity. */ .report-request-modal .rr-section-title, .report-request-modal .rr-format-section .control-label { display: block; margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: #1F2933; } .report-request-modal .rr-optional { font-weight: 400; color: #7B8794; } /* --- Format selection ----------------------------------------------------- */ /* Shiny renders radioButtons as .radio > label > input + span, so the *is* the control: the wrapping label makes the whole thing clickable and the native radio keeps keyboard and screen-reader semantics. No JavaScript. Compact by design — PDF, Word and PowerPoint need no explaining, so each is a radio, an icon and a name on one line. */ .report-request-modal .rr-format-section .shiny-options-group { display: flex; gap: 0.6rem; } .report-request-modal .rr-format-section .radio { flex: 1 1 0; min-width: 0; margin: 0; } .report-request-modal .rr-format-section .radio label { display: block; position: relative; height: 100%; margin: 0; padding: 0; font-weight: 400; cursor: pointer; } .report-request-modal .rr-format-section .radio input[type="radio"] { position: absolute; top: 50%; left: 0.85rem; margin: 0; transform: translateY(-50%); accent-color: var(--rr-accent, #893448); cursor: pointer; } /* Bootstrap 5 redraws Shiny's radios and checkboxes with `appearance: none` and paints the dot as a background image over a #007bc2 fill, so `accent-color` above never takes effect and the indicator has to be recoloured directly. Its own selectors are .shiny-input-container .radio input (0,2,1); these win on specificity. */ .report-request-modal .rr-format-section .radio input[type="radio"]:checked { background-color: var(--rr-accent, #893448); border-color: var(--rr-accent, #893448); } .report-request-modal .rr-format-section .radio input[type="radio"]:focus { border-color: var(--rr-accent, #893448); box-shadow: 0 0 0 0.2rem var(--rr-accent-soft, rgba(0, 0, 0, 0.08)); } /* The control itself: radio, file-type icon, name — 44px tall like the inputs below it. */ .report-request-modal .rr-format-section .radio label > span { display: flex; align-items: center; gap: 0.5rem; height: 100%; min-height: 44px; padding: 0.4rem 0.75rem 0.4rem 2.5rem; border: 1px solid #ded9d1; border-radius: 8px; background: #fff; transition: border-color 0.15s ease, background-color 0.15s ease; } .report-request-modal .rr-format-section .radio label:hover > span { border-color: var(--rr-accent, #893448); } .report-request-modal .rr-format-section .radio input:checked ~ span { border-color: var(--rr-accent, #893448); background: var(--rr-accent-soft, rgba(0, 0, 0, 0.04)); box-shadow: inset 0 0 0 1px var(--rr-accent, #893448); } .report-request-modal .rr-format-section .radio input:focus-visible ~ span { outline: 2px solid var(--rr-accent, #893448); outline-offset: 2px; } .report-request-modal .rr-format-icon { flex: 0 0 auto; font-size: 1.2rem; line-height: 1; } /* Each file type keeps its own recognisable colour; the client accent is reserved for the selection state. */ .report-request-modal .rr-format-icon-pdf { color: #C8102E; } .report-request-modal .rr-format-icon-word { color: #2B579A; } .report-request-modal .rr-format-icon-powerpoint { color: #D24726; } .report-request-modal .rr-format-icon-excel { color: #217346; } .report-request-modal .rr-format-name { min-width: 0; overflow: hidden; font-size: 0.95rem; font-weight: 700; color: #1F2933; text-overflow: ellipsis; white-space: nowrap; } /* --- Form fields ---------------------------------------------------------- */ .report-request-modal .rr-field { min-width: 0; } .report-request-modal .rr-label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; font-weight: 400; color: #3E4C59; } /* The one required field's label carries the weight of a section heading. */ .report-request-modal .rr-label-strong { margin-bottom: 0.5rem; font-size: 1rem; font-weight: 700; color: #1F2933; } .report-request-modal .rr-required { color: #c0392b; } /* Shiny's textInput and selectInput emit their own empty .control-label; the visible one above is ours, so collapse the placeholder they leave behind. */ .report-request-modal .rr-field .shiny-label-null { display: none; } .report-request-modal .rr-field .form-group { margin-bottom: 0; } /* Qualified by element, and deliberately so. selectize copies the classes of the , and Bootstrap 5's .form-control sets `appearance: none` — which strips the native dropdown arrow. Put one back. */ .report-request-modal .rr-field select.form-control { padding-right: 2.25rem; line-height: normal; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237B8794' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 14px 11px; } .report-request-modal .rr-field input.form-control:focus, .report-request-modal .rr-field textarea.form-control:focus, .report-request-modal .rr-field select:focus { border-color: var(--rr-accent, #893448); box-shadow: 0 0 0 3px var(--rr-accent-soft, rgba(0, 0, 0, 0.08)); outline: none; } .report-request-modal .rr-field .form-control.rr-invalid { border-color: #c0392b; } .report-request-modal .rr-field .form-control.rr-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); } .report-request-modal .rr-field-error { margin-top: 0.3rem; font-size: 0.85rem; color: #c0392b; } /* The signed-in layout's copy of that slot sits below the last section rather than under a field, so it needs the gap a section would have given it. */ .report-request-modal .rr-form-error { margin-top: 0.9rem; } .report-request-modal .rr-grid-2, .report-request-modal .rr-grid-3 { display: grid; gap: 0.75rem; } .report-request-modal .rr-grid-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0.75rem; } .report-request-modal .rr-grid-3 { grid-template-columns: repeat(3, 1fr); } /* --- Marketing consent ---------------------------------------------------- */ /* Kept visually apart from report delivery by a rule, so the optional opt-in never reads as part of getting the report. */ .report-request-modal .rr-consent { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #ece9e3; } .report-request-modal .rr-consent .form-group { margin-bottom: 0; } .report-request-modal .rr-consent .checkbox label { display: flex; gap: 0.65rem; align-items: flex-start; margin: 0; font-size: 0.875rem; line-height: 1.45; color: #52606D; cursor: pointer; } .report-request-modal .rr-consent .checkbox input[type="checkbox"] { position: static; flex: 0 0 auto; margin: 0.15rem 0 0; accent-color: var(--rr-accent, #893448); cursor: pointer; } /* Same Bootstrap 5 override as the format radios above. */ .report-request-modal .rr-consent .checkbox input[type="checkbox"]:checked { background-color: var(--rr-accent, #893448); border-color: var(--rr-accent, #893448); } .report-request-modal .rr-consent .checkbox input[type="checkbox"]:focus { border-color: var(--rr-accent, #893448); box-shadow: 0 0 0 0.2rem var(--rr-accent-soft, rgba(0, 0, 0, 0.08)); } /* Optionality and the policy link both run inline with the sentence — neither gets a line of its own. */ .report-request-modal .rr-optional-tag { margin-left: 0.25rem; color: #7B8794; } .report-request-modal .rr-privacy-link { color: var(--rr-accent, #893448); text-decoration: underline; white-space: nowrap; } /* --- Footer --------------------------------------------------------------- */ /* Overrides the global .modal-footer { justify-content: flex-start; padding-top: 0 }. Slim, but the buttons keep the 44px target. */ .report-request-modal .modal-footer { justify-content: flex-end; flex: 0 0 auto; gap: 0.65rem; padding: 0.85rem 1.5rem; border-top: 1px solid #ece9e3; } .report-request-modal .modal-footer > * { margin: 0; } .report-request-modal .rr-btn-cancel, .report-request-modal .rr-btn-generate { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: 44px; padding: 0 1.5rem; border-radius: 8px; font-size: 0.95rem; } /* Outlined in the client colour: clearly the lesser of the two actions, but still part of the same pair. */ .report-request-modal .rr-btn-cancel { border: 1px solid var(--rr-accent, #893448); background: #fff; font-weight: 500; color: var(--rr-accent, #893448); } .report-request-modal .rr-btn-cancel:hover { background: var(--rr-accent-soft, rgba(0, 0, 0, 0.04)); color: var(--rr-accent, #893448); } .report-request-modal .rr-btn-generate { border: 1px solid var(--rr-accent, #893448); background: var(--rr-accent, #893448); font-weight: 700; color: #fff; } .report-request-modal .rr-btn-generate:hover, .report-request-modal .rr-btn-generate:focus { filter: brightness(1.12); background: var(--rr-accent, #893448); border-color: var(--rr-accent, #893448); color: #fff; } .report-request-modal .rr-btn-cancel:focus-visible, .report-request-modal .rr-btn-generate:focus-visible { outline: 2px solid var(--rr-accent, #893448); outline-offset: 2px; } /* --- Signed-in layout ----------------------------------------------------- */ /* Shown instead of the contact form when the requester has a session (R/cityviz_utils_report_request.R). We already know their address, so the modal asks the only question left: who should receive this, and should a copy reach the tenant's SharePoint or Teams. */ /* The address input is present but not for reading or editing — it exists so the four submit paths can keep deriving the download hash and the `downloads` row from `input$report_email_address`. Clipped rather than `display: none`, because a hidden input is one Shiny may not report a value for. Not focusable, and aria-hidden on the wrapper keeps it out of the accessibility tree; the visible address sits in .rr-self-address. */ .report-request-modal .rr-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .report-request-modal .rr-self .form-group { margin-bottom: 0; } .report-request-modal .rr-self .checkbox label { display: flex; gap: 0.65rem; align-items: center; margin: 0; font-size: 1rem; font-weight: 600; color: #1F2933; cursor: pointer; } .report-request-modal .rr-self .checkbox input[type="checkbox"] { position: static; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--rr-accent, #893448); cursor: pointer; } /* Same Bootstrap 5 override the format radios and the consent box carry. */ .report-request-modal .rr-self .checkbox input[type="checkbox"]:checked { background-color: var(--rr-accent, #893448); border-color: var(--rr-accent, #893448); } /* Aligned under the checkbox label's text, not under the checkbox: the address belongs to "Email me a copy", it is not a second option. 20px box + 0.65rem gap. */ .report-request-modal .rr-self-address { margin: 0.1rem 0 0 calc(20px + 0.65rem); font-size: 0.9rem; color: #7B8794; word-break: break-all; } .report-request-modal .rr-recipients { margin-top: 1.1rem; } /* The chip field takes the row; Add keeps its own width. */ .report-request-modal .rr-recipients-row { display: flex; gap: 0.65rem; align-items: flex-start; } .report-request-modal .rr-recipients-row > .shiny-input-container { flex: 1 1 auto; min-width: 0; } .report-request-modal .rr-btn-add { flex: 0 0 auto; height: 44px; padding: 0 1.35rem; border: 1px solid var(--rr-accent, #893448); border-radius: 8px; background: #fff; font-size: 0.95rem; font-weight: 600; color: var(--rr-accent, #893448); } .report-request-modal .rr-btn-add:hover { background: var(--rr-accent-soft, rgba(0, 0, 0, 0.04)); } .report-request-modal .rr-btn-add:focus-visible { outline: 2px solid var(--rr-accent, #893448); outline-offset: 2px; } .report-request-modal .rr-hint { margin-top: 0.4rem; font-size: 0.8125rem; color: #7B8794; } /* --- Recipient chips ------------------------------------------------------ */ /* selectize in tag-input mode. It is the one control in this modal that is not `selectize = FALSE`: the Country field avoids it to keep this stylesheet out of a fight with selectize's own, and the price of admitting it here is the block below. Everything is scoped to .report-request-modal, so no other selectize in the app is touched. Two things decide the selectors below, and both are easy to get wrong. First, selectize's own stylesheet ships with the modal's HTML dependency, so on a route where nothing else uses selectize it is appended to *after* this file and wins every specificity tie. Every rule here therefore has to out-specify its selectize counterpart outright rather than rely on coming later — the counterpart's specificity is noted where it is not 0,1,0. Second, selectize copies the replaced with it. */ .report-request-modal .selectize-control, .report-request-modal .selectize-control.form-control { margin: 0; height: auto; min-height: 0; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; } .report-request-modal .selectize-input { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-height: 44px; border: 1px solid #cbd2d9; border-radius: 8px; box-shadow: none; font-size: 0.95rem; line-height: 1.4; } /* Selectize squares the field off while its dropdown is open, to sit flush against the panel, at the same two classes as the rule above — so it wins the tie whenever its sheet is the one that loads last, and the field's corners change shape as you type. The panel here is detached and rounded, so the field keeps its own radius throughout. */ .report-request-modal .selectize-input.dropdown-active { border-radius: 8px; } /* Padding is its own rule because selectize sets it a second time, on `.selectize-control.multi .selectize-input.has-items` (0,3,0) — so the chips would sit on selectize's 7px once a chip existed, and on ours before that. Both states, one padding. */ .report-request-modal .selectize-control.multi .selectize-input, .report-request-modal .selectize-control.multi .selectize-input.has-items { padding: 0.35rem 0.6rem; } .report-request-modal .selectize-input.focus, .report-request-modal .selectize-input.input-active { border-color: var(--rr-accent, #893448); box-shadow: 0 0 0 0.2rem var(--rr-accent-soft, rgba(0, 0, 0, 0.08)); } /* No .rr-invalid treatment for the chip field, deliberately. A signed-in request fails validation when it has nowhere to go, not because anything typed here is wrong — see report_request_validate(). Turning this field red would flag the one control in the section that is genuinely optional. The message under the section carries the whole story instead. */ /* The chips themselves: grey pill, address, remove control. Two stylesheets already style this element at 0,3,0 — selectize's own `#efefef` and cityviz.css's dark `#454545` pill (the one seen on Building Permits and the admin pages) — so this needs four classes to land. cityviz.css's rules stay as they are; five other call sites depend on them. */ .report-request-modal .selectize-control.multi .selectize-input > .item { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; padding: 0.25rem 0.6rem; border: 0; border-radius: 999px; background: #e4e7eb; font-size: 0.875rem; color: #1F2933; } /* Selectize's `> div.active` is 0,4,0 and paints the chip Bootstrap blue. */ .report-request-modal .selectize-control.multi .selectize-input > .item.active { background: var(--rr-accent-soft, rgba(0, 0, 0, 0.08)); color: #1F2933; } /* The chip's "x", drawn by the remove_button plugin that rr_recipients_input() turns on. cityviz.css styles this for its dark pills — white glyph, white divider, and `!important` on the divider — which on these light pills is an invisible × behind a white line. Beaten on specificity, importance matched where cityviz.css uses it. No divider here: the design this modal follows shows a plain ×. The pill's own right padding is gone because the plugin forces `padding-right: 0 !important` on .item, so the × carries it instead. */ .report-request-modal .selectize-control.plugin-remove_button .selectize-input > .item > .remove { margin: 0; padding: 0 0.5rem 0 0.15rem; border: 0; border-left: 0 !important; border-radius: 0 999px 999px 0; color: #3E4C59; font-size: 1.05rem; line-height: 1.3; text-decoration: none; } .report-request-modal .selectize-control.plugin-remove_button .selectize-input > .item > .remove:hover { background: none; color: #1F2933; } .report-request-modal .selectize-input > input { min-width: 8rem !important; font-size: 0.95rem; } /* The dropdown carries the copied `form-control` class too, so it is listed explicitly — and every box property selectize sets on it (padding, margin, border, shadow) is restated, because inheriting half of them from a sheet that may load either side of this one is how the offset panel happened. */ .report-request-modal .selectize-dropdown, .report-request-modal .selectize-dropdown.form-control { z-index: 1; height: auto; margin: 0.35rem 0 0; /* Options are rounded and inset by this padding, so the highlight sits inside the panel instead of running square into its rounded corners. */ padding: 0.25rem; border: 1px solid #cbd2d9; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(31, 41, 51, 0.12); font-size: 0.9rem; } /* selectize pads the scroll container 5px top and bottom; with the panel padding above that is a second, uneven inset. */ .report-request-modal .selectize-dropdown-content { padding: 0; } .report-request-modal .selectize-dropdown .option, .report-request-modal .selectize-dropdown .create, .report-request-modal .selectize-dropdown .no-results { padding: 0.45rem 0.6rem; border-radius: 6px; } /* Both of selectize's highlight rules: `.active` (Bootstrap blue) and `.active:not(.selected)` (0,3,0, grey). */ .report-request-modal .selectize-dropdown .active, .report-request-modal .selectize-dropdown .active:not(.selected) { background: #f1f4f7; color: #1F2933; } .report-request-modal .selectize-dropdown .create { color: #1F2933; } /* --- Other delivery options ----------------------------------------------- */ /* Separated from Recipients by a rule for the same reason the consent row is: this is not part of getting the report, it is a decision about sending a copy somewhere with a wider audience. Both boxes start unchecked, every time. */ .report-request-modal .rr-delivery-section { margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid #ece9e3; } .report-request-modal .rr-delivery-option .form-group { margin-bottom: 0; } .report-request-modal .rr-delivery-option + .rr-delivery-option { margin-top: 0.85rem; } /* shiny::checkboxInput() wraps whatever it is given as a label in a of its own, so the icon and the text are siblings *inside* that wrapper, not inside the . Both levels therefore need to be flex rows: without the second rule the wrapper stays inline, .rr-delivery-text (a flex column, so block-level) forces a line break, and the icon ends up stacked above the label instead of beside it. */ .report-request-modal .rr-delivery-option .checkbox label { display: flex; gap: 0.75rem; align-items: center; margin: 0; cursor: pointer; } .report-request-modal .rr-delivery-option .checkbox label > span { display: flex; flex: 1 1 auto; gap: 0.75rem; align-items: center; min-width: 0; } .report-request-modal .rr-delivery-option .checkbox input[type="checkbox"] { position: static; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--rr-accent, #893448); cursor: pointer; } .report-request-modal .rr-delivery-option .checkbox input[type="checkbox"]:checked { background-color: var(--rr-accent, #893448); border-color: var(--rr-accent, #893448); } .report-request-modal .rr-delivery-icon { display: inline-flex; flex: 0 0 auto; align-items: center; } .report-request-modal .rr-delivery-text { display: flex; flex-direction: column; min-width: 0; } .report-request-modal .rr-delivery-label { font-size: 1rem; font-weight: 700; color: #1F2933; } .report-request-modal .rr-delivery-desc { font-size: 0.875rem; color: #7B8794; } /* --- Narrower screens ----------------------------------------------------- */ /* Two columns first: at this width the contact row's three fields are narrower than the text they hold, but a single column is a needlessly tall form. The Country select takes the full second row. */ @media (max-width: 767.98px) { .report-request-modal .rr-grid-3 { grid-template-columns: repeat(2, 1fr); } .report-request-modal .rr-grid-3 > :last-child { grid-column: 1 / -1; } } /* One column: format choices and every field. */ @media (max-width: 575.98px) { .modal-dialog.report-request-dialog { margin: 0.75rem; } .report-request-modal .modal-body, .report-request-modal .modal-footer { padding-left: 1.15rem; padding-right: 1.15rem; } .report-request-modal .modal-header { padding-left: 1.15rem; padding-right: 3rem; } .report-request-modal .rr-subtitle { padding-left: 0; } /* `flex: 1 1 0` sizes the cards evenly across a row, but in a column it collapses them to a zero basis and the contents spill out — so each sizes to its own content here. */ .report-request-modal .rr-format-section .shiny-options-group { flex-direction: column; } .report-request-modal .rr-format-section .radio { flex: 0 0 auto; } .report-request-modal .rr-grid-2, .report-request-modal .rr-grid-3 { grid-template-columns: 1fr; } .report-request-modal .rr-grid-3 > :last-child { grid-column: auto; } /* The chip field needs the whole width at this size, so Add drops beneath it rather than squeezing the addresses into a column of pills. */ .report-request-modal .rr-recipients-row { flex-direction: column; align-items: stretch; } .report-request-modal .rr-btn-add { width: 100%; } .report-request-modal .modal-footer { flex-direction: column-reverse; align-items: stretch; } }