Merge pull request #5710 from cfpb/ans_fix_search_focus

Global Search: Fix cropped search focus rectangle
cfpb · May 6, 2020 · 9f8a0f0 · 9f8a0f0
2 parents b531038 + a8fa03d
commit 9f8a0f0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.less
@@ -282,6 +282,9 @@
             &_content {
                 right: @margin_half__em;
                 width: auto;
+                // Add margin so that the focus rectangle isn't cropped by
+                // the hidden overflow of the search container element.
+                margin-left: 3px;
             }
         }
     } );

diff --git a/cfgov/unprocessed/css/organisms/header.less b/cfgov/unprocessed/css/organisms/header.less
@@ -112,7 +112,9 @@
                 }
 
                 > .m-global-search {
-                    min-width: 340px;
+                    // Width should visually be 340px, plus 3px to accommodate
+                    // the focus state.
+                    min-width: 343px;
                 }
             }
         } );