Merge pull request #3547 from cisagov/rjm/3357-action-kebobs-position

#3357: Position action kebobs on the left on desktops - [RJM]

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 {
+@include at-media-max("desktop") {
-    top: auto;
+    tr:last-of-type .usa-accordion--more-actions .usa-accordion__content {
-    bottom: -10px;
+        top: auto;
-    right: 30px;
+        bottom: -10px;
+        right: 30px;
+    }
 }
 
 // A CSS only show-more/show-less based on usa-accordion

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;
 }

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;
+  }
+}

src/registrar/templates/includes/domain_requests_table.html

@@ -163,7 +163,7 @@
     </div>
     {% endif %}
 
-    <div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="domain-requests__table-wrapper">
+    <div class="display-none usa-table-container--scrollable usa-table-container--override-overflow margin-top-0" tabindex="0" id="domain-requests__table-wrapper">
         <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
             <caption class="sr-only">Your domain requests</caption>
             <thead>

src/registrar/templates/includes/domains_table.html

@@ -198,7 +198,7 @@
       </svg>
     </button>
   </div>
-  <div class="display-none usa-table-container--scrollable margin-top-0" tabindex="0" id="domains__table-wrapper">
+  <div class="display-none usa-table-container--scrollable usa-table-container--override-overflow margin-top-0" tabindex="0" id="domains__table-wrapper">
     <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
       <caption class="sr-only">Your registered domains</caption>
       <thead>