Fix focus indicator clipping in ScrollableContainer

.changelog/1874.trivial.md

@@ -0,0 +1 @@
+Fix focus indicator clipping in ScrollableContainer

src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap

@@ -215,13 +215,15 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   box-sizing: border-box;
   max-width: 100%;
   margin-bottom: 48px;
+  margin-left: -2px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   padding-top: 24px;
   padding-bottom: 24px;
+  padding-left: 2px;
   padding-right: 12px;
   overflow-y: auto;
 }
@@ -493,6 +495,14 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
 @media only screen and (max-width:768px) {
   .c3 {
     border: solid 1px #0092f6;
@@ -511,13 +521,25 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c2 {
+    margin-left: -2px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     padding-top: 12px;
     padding-bottom: 12px;
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c2 {
+    padding-left: 2px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     padding-right: 6px;

src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap

@@ -146,13 +146,15 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   box-sizing: border-box;
   max-width: 100%;
   margin-bottom: 48px;
+  margin-left: -2px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   padding-top: 24px;
   padding-bottom: 24px;
+  padding-left: 2px;
   padding-right: 12px;
   overflow-y: auto;
 }
@@ -321,6 +323,14 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
 @media only screen and (max-width:768px) {
   .c3 {
     border: solid 1px #0092f6;
@@ -339,13 +349,25 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c2 {
+    margin-left: -2px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     padding-top: 12px;
     padding-bottom: 12px;
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c2 {
+    padding-left: 2px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     padding-right: 6px;

src/app/components/Toolbar/Features/ScrollableContainer/index.tsx

@@ -3,6 +3,8 @@ import { Box } from 'grommet/es6/components/Box'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { layerScrollableAreaHeight } from '../layer'
 
+const spaceForFocusIndicator = '2px'
+
 interface ScrollableContainerProps {
   children: ReactNode
 }
@@ -13,10 +15,10 @@ export const ScrollableContainer = ({ children }: ScrollableContainerProps) => {
   return (
     <Box
       gap="small"
-      pad={{ vertical: 'medium', right: 'small' }}
+      pad={{ vertical: 'medium', right: 'small', left: spaceForFocusIndicator }}
       overflow={{ vertical: 'auto' }}
       style={{ maxHeight: layerScrollableAreaHeight }}
-      margin={{ bottom: isMobile ? 'large' : 'none' }}
+      margin={{ bottom: isMobile ? 'large' : 'none', left: `-${spaceForFocusIndicator}` }}
     >
       {children}
     </Box>