fix: bottom divider on favorites page

src/components/InstitutionGridTile.js

@@ -7,9 +7,10 @@ import { __ } from 'src/utilities/Intl'
 
 import { useTokens } from '@kyper/tokenprovider'
 import { InstitutionLogo } from '@mxenabled/mxui'
-import { Button } from '@mui/material'
+import { Button, Stack } from '@mui/material'
 
 import { getTrueWidth } from 'src/redux/selectors/Browser'
+import moduleStyles from 'src/components/InstitutionGridTile.module.css'
 
 export const InstitutionGridTile = (props) => {
   const { institution, selectInstitution } = props
@@ -24,11 +25,11 @@ export const InstitutionGridTile = (props) => {
   return (
     <Button
       aria-label={__('Add account with %1', institution.name)}
-      className={css(styles.container)}
+      className={moduleStyles.container}
       data-test={`${institution.name.replace(/\s+/g, '-')}-tile`}
       onClick={selectInstitution}
-      style={styles.container}
       sx={{
+        width: `${containerWidth}px`,
         '&:hover .iconTile': {
           boxShadow: '0px 0px 0px 4px rgba(238, 241, 246, 1)',
         },
@@ -46,7 +47,12 @@ export const InstitutionGridTile = (props) => {
       }}
       type="button"
     >
-      <div style={styles.institutionBodyContainer}>
+      <Stack
+        alignItems="center"
+        alignSelf="stretch"
+        className={moduleStyles.institutionBodyContainer}
+        spacing={1}
+      >
         <div className={'iconTile ' + css(styles.iconTile)} style={styles.iconTile}>
           <InstitutionLogo
             alt={`${institution.name} logo`}
@@ -60,30 +66,13 @@ export const InstitutionGridTile = (props) => {
         <div style={styles.textColumn}>
           <div style={styles.name}>{institution.name}</div>
         </div>
-      </div>
+      </Stack>
     </Button>
   )
 }
 
 const getStyles = (tokens, width) => {
   return {
-    container: {
-      padding: `${tokens.Spacing.Tiny}px ${tokens.Spacing.Tiny}px 0px`,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: `${width}px`,
-      height: `${width + 28}px`,
-    },
-    institutionBodyContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      padding: '8px',
-      alignItems: 'center',
-      gap: '8px',
-      height: `${width - 8}px`,
-      width: `${width - 8}px`,
-    },
     iconTile: {
       display: 'flex',
       justifyContent: 'center',

src/components/InstitutionGridTile.module.css

@@ -0,0 +1,12 @@
+.container:global(.MuiButton-root) {
+  padding: var(--spacing-point-5) var(--spacing-point-5) 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* the MXUI theme fixes medium buttons at 44px; the tile must grow with its content */
+  height: auto;
+}
+
+.institutionBodyContainer {
+  padding: var(--spacing-1);
+}

src/views/search/views/PopularInstitutionsList.js

@@ -19,6 +19,7 @@ import { SlideDown } from 'src/components/SlideDown'
 
 import { getDelay } from 'src/utilities/getDelay'
 import { InstituionGrid } from 'src/views/search/views/InstitutionGrid'
+import moduleStyles from 'src/views/search/views/PopularInstitutionsList.module.css'
 
 export const PopularInstitutionsList = (props) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_SEARCH_POPULAR)
@@ -56,7 +57,7 @@ export const PopularInstitutionsList = (props) => {
           posthogEvent={AnalyticEvents.SELECT_POPULAR_INSTITUTION}
         />
       </SlideDown>
-      <hr aria-hidden={true} style={styles.horizontalLine} />
+      <hr aria-hidden={true} className={moduleStyles.horizontalLine} />
 
       <div style={styles.transparentButton}>
         <SlideDown delay={getNextDelay()}>
@@ -117,10 +118,6 @@ const getStyles = (tokens) => {
       justifyContent: 'center',
       marginBottom: '8px',
     },
-    horizontalLine: {
-      margin: tokens.Spacing.Small,
-      alignSelf: 'stretch',
-    },
   }
 }
 

src/views/search/views/PopularInstitutionsList.module.css

@@ -0,0 +1,4 @@
+.horizontalLine {
+  margin: var(--spacing-2) var(--spacing-1-point-5) var(--spacing-1-point-5);
+  align-self: stretch;
+}