diff --git a/src/registrar/assets/src/sass/_theme/_accordions.scss b/src/registrar/assets/src/sass/_theme/_accordions.scss index 86b8779ab..a4376337d 100644 --- a/src/registrar/assets/src/sass/_theme/_accordions.scss +++ b/src/registrar/assets/src/sass/_theme/_accordions.scss @@ -25,7 +25,6 @@ // Note, width is determined by a custom width class on one of the children position: absolute; z-index: 1; - left: 0; border-radius: 4px; border: solid 1px color('base-lighter'); padding: units(2) units(2) units(3) units(2); @@ -42,6 +41,14 @@ } } +// This will work in responsive tables if we overwrite the overflow value on the table container +// Works with styles in _tables +@include at-media(desktop) { + .usa-accordion--more-actions .usa-accordion__content { + left: 0; + } +} + .usa-accordion--select .usa-accordion__content { top: 33.88px; } @@ -59,10 +66,12 @@ // This won't work on the Members table rows because that table has show-more rows // Currently, that's not an issue since that Members table is not wrapped in the // reponsive wrapper. -tr:last-of-type .usa-accordion--more-actions .usa-accordion__content { - top: auto; - bottom: -10px; - right: 30px; +@include at-media-max("desktop") { + tr:last-of-type .usa-accordion--more-actions .usa-accordion__content { + top: auto; + bottom: -10px; + right: 30px; + } } // A CSS only show-more/show-less based on usa-accordion diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss index 9a1c5d12b..1442acf1f 100644 --- a/src/registrar/assets/src/sass/_theme/_base.scss +++ b/src/registrar/assets/src/sass/_theme/_base.scss @@ -226,11 +226,6 @@ abbr[title] { } } -// Boost this USWDS utility class for the accordions in the portfolio requests table -.left-auto { - left: auto!important; -} - .usa-banner__inner--widescreen { max-width: $widescreen-max-width; } diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss index 0e3118126..222f44fcc 100644 --- a/src/registrar/assets/src/sass/_theme/_tables.scss +++ b/src/registrar/assets/src/sass/_theme/_tables.scss @@ -152,3 +152,12 @@ th { .usa-table--full-borderless th { border: none !important; } + +// This is an override to overflow on certain tables (note the custom class) +// so that a popup menu can appear and starddle the edge of the table on large +// screen sizes. Works with styles in _accordions +@include at-media(desktop) { + .usa-table-container--scrollable.usa-table-container--override-overflow { + overflow-y: visible; + } +} diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html index 8adc0929a..df6b12828 100644 --- a/src/registrar/templates/includes/domain_requests_table.html +++ b/src/registrar/templates/includes/domain_requests_table.html @@ -163,7 +163,7 @@ {% endif %} -