From 80bf86ab7c2cf200e1fdf2d7b99f72657c490fb2 Mon Sep 17 00:00:00 2001 From: Rachid Mrad Date: Wed, 19 Feb 2025 20:06:23 -0500 Subject: [PATCH 1/8] action kebobs ob left on desktop --- .../assets/src/sass/_theme/_accordions.scss | 19 ++++++++++++++----- .../assets/src/sass/_theme/_base.scss | 5 ----- .../assets/src/sass/_theme/_tables.scss | 9 +++++++++ .../includes/domain_requests_table.html | 2 +- .../templates/includes/domains_table.html | 2 +- 5 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_accordions.scss b/src/registrar/assets/src/sass/_theme/_accordions.scss index ca9990ca9..c57446bb5 100644 --- a/src/registrar/assets/src/sass/_theme/_accordions.scss +++ b/src/registrar/assets/src/sass/_theme/_accordions.scss @@ -15,7 +15,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); @@ -32,6 +31,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; } @@ -44,10 +51,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; +@media screen and (max-width: 1023px) { + 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 9ca1355c3..b134c1ebb 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 614d0348e..8150093c6 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 %} -