From 612b8aff19de69e20b20836341deb1b969b28c4e Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Tue, 22 Sep 2026 12:13:17 -0600
Subject: [PATCH 1/3] fix: bottom divider on favorites page

---
 src/components/InstitutionGridTile.js         | 24 ++++---------------
 src/components/InstitutionGridTile.module.css | 18 ++++++++++++++
 .../search/views/PopularInstitutionsList.js   |  7 ++----
 .../views/PopularInstitutionsList.module.css  |  4 ++++
 4 files changed, 28 insertions(+), 25 deletions(-)
 create mode 100644 src/components/InstitutionGridTile.module.css
 create mode 100644 src/views/search/views/PopularInstitutionsList.module.css

diff --git a/src/components/InstitutionGridTile.js b/src/components/InstitutionGridTile.js
index 919f91541c..1ee092d2f4 100644
--- a/src/components/InstitutionGridTile.js
+++ b/src/components/InstitutionGridTile.js
@@ -10,6 +10,7 @@ import { InstitutionLogo } from '@mxenabled/mxui'
 import { Button } 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,10 +25,10 @@ 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}
+      style={{ '--tile-width': `${containerWidth}px` }}
       sx={{
         '&:hover .iconTile': {
           boxShadow: '0px 0px 0px 4px rgba(238, 241, 246, 1)',
@@ -46,7 +47,7 @@ export const InstitutionGridTile = (props) => {
       }}
       type="button"
     >
-      <div style={styles.institutionBodyContainer}>
+      <div className={moduleStyles.institutionBodyContainer}>
         <div className={'iconTile ' + css(styles.iconTile)} style={styles.iconTile}>
           <InstitutionLogo
             alt={`${institution.name} logo`}
@@ -67,23 +68,6 @@ export const InstitutionGridTile = (props) => {
 
 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',
diff --git a/src/components/InstitutionGridTile.module.css b/src/components/InstitutionGridTile.module.css
new file mode 100644
index 0000000000..267ab8034e
--- /dev/null
+++ b/src/components/InstitutionGridTile.module.css
@@ -0,0 +1,18 @@
+.container:global(.MuiButton-root) {
+  padding: var(--spacing-point-5) var(--spacing-point-5) 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--tile-width);
+  /* the MXUI theme fixes medium buttons at 44px; the tile must grow with its content */
+  height: auto;
+}
+
+.institutionBodyContainer {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-1);
+  align-items: center;
+  gap: var(--spacing-1);
+  width: calc(var(--tile-width) - var(--spacing-1));
+}
diff --git a/src/views/search/views/PopularInstitutionsList.js b/src/views/search/views/PopularInstitutionsList.js
index d590743b9f..1e313ca54b 100644
--- a/src/views/search/views/PopularInstitutionsList.js
+++ b/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',
-    },
   }
 }
 
diff --git a/src/views/search/views/PopularInstitutionsList.module.css b/src/views/search/views/PopularInstitutionsList.module.css
new file mode 100644
index 0000000000..c6f871622b
--- /dev/null
+++ b/src/views/search/views/PopularInstitutionsList.module.css
@@ -0,0 +1,4 @@
+.horizontalLine {
+  margin: var(--spacing-1) var(--spacing-1-point-5) var(--spacing-1-point-5);
+  align-self: stretch;
+}

From 4acb03076ac416f201c11e15bad11d318ccd2281 Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Tue, 22 Sep 2026 13:20:08 -0600
Subject: [PATCH 2/3] use stack instead of css style sheet and remove variable
 for width

---
 src/components/InstitutionGridTile.js         | 8 ++++----
 src/components/InstitutionGridTile.module.css | 6 +-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/InstitutionGridTile.js b/src/components/InstitutionGridTile.js
index 1ee092d2f4..1e778cce27 100644
--- a/src/components/InstitutionGridTile.js
+++ b/src/components/InstitutionGridTile.js
@@ -7,7 +7,7 @@ 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'
@@ -28,7 +28,7 @@ export const InstitutionGridTile = (props) => {
       className={moduleStyles.container}
       data-test={`${institution.name.replace(/\s+/g, '-')}-tile`}
       onClick={selectInstitution}
-      style={{ '--tile-width': `${containerWidth}px` }}
+      style={{ width: `${containerWidth}px` }}
       sx={{
         '&:hover .iconTile': {
           boxShadow: '0px 0px 0px 4px rgba(238, 241, 246, 1)',
@@ -47,7 +47,7 @@ export const InstitutionGridTile = (props) => {
       }}
       type="button"
     >
-      <div className={moduleStyles.institutionBodyContainer}>
+      <Stack className={moduleStyles.institutionBodyContainer} spacing={1}>
         <div className={'iconTile ' + css(styles.iconTile)} style={styles.iconTile}>
           <InstitutionLogo
             alt={`${institution.name} logo`}
@@ -61,7 +61,7 @@ export const InstitutionGridTile = (props) => {
         <div style={styles.textColumn}>
           <div style={styles.name}>{institution.name}</div>
         </div>
-      </div>
+      </Stack>
     </Button>
   )
 }
diff --git a/src/components/InstitutionGridTile.module.css b/src/components/InstitutionGridTile.module.css
index 267ab8034e..daa40d9982 100644
--- a/src/components/InstitutionGridTile.module.css
+++ b/src/components/InstitutionGridTile.module.css
@@ -3,16 +3,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: var(--tile-width);
   /* the MXUI theme fixes medium buttons at 44px; the tile must grow with its content */
   height: auto;
 }
 
 .institutionBodyContainer {
-  display: flex;
-  flex-direction: column;
   padding: var(--spacing-1);
   align-items: center;
-  gap: var(--spacing-1);
-  width: calc(var(--tile-width) - var(--spacing-1));
+  align-self: stretch;
 }

From 5a9b2fb30fcd1525e6e85b58891bb4462bccfafc Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Tue, 22 Sep 2026 13:43:26 -0600
Subject: [PATCH 3/3] fixed mr comments

---
 src/components/InstitutionGridTile.js                    | 9 +++++++--
 src/components/InstitutionGridTile.module.css            | 2 --
 .../search/views/PopularInstitutionsList.module.css      | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/InstitutionGridTile.js b/src/components/InstitutionGridTile.js
index 1e778cce27..31b8889b4d 100644
--- a/src/components/InstitutionGridTile.js
+++ b/src/components/InstitutionGridTile.js
@@ -28,8 +28,8 @@ export const InstitutionGridTile = (props) => {
       className={moduleStyles.container}
       data-test={`${institution.name.replace(/\s+/g, '-')}-tile`}
       onClick={selectInstitution}
-      style={{ width: `${containerWidth}px` }}
       sx={{
+        width: `${containerWidth}px`,
         '&:hover .iconTile': {
           boxShadow: '0px 0px 0px 4px rgba(238, 241, 246, 1)',
         },
@@ -47,7 +47,12 @@ export const InstitutionGridTile = (props) => {
       }}
       type="button"
     >
-      <Stack className={moduleStyles.institutionBodyContainer} spacing={1}>
+      <Stack
+        alignItems="center"
+        alignSelf="stretch"
+        className={moduleStyles.institutionBodyContainer}
+        spacing={1}
+      >
         <div className={'iconTile ' + css(styles.iconTile)} style={styles.iconTile}>
           <InstitutionLogo
             alt={`${institution.name} logo`}
diff --git a/src/components/InstitutionGridTile.module.css b/src/components/InstitutionGridTile.module.css
index daa40d9982..012f12ad65 100644
--- a/src/components/InstitutionGridTile.module.css
+++ b/src/components/InstitutionGridTile.module.css
@@ -9,6 +9,4 @@
 
 .institutionBodyContainer {
   padding: var(--spacing-1);
-  align-items: center;
-  align-self: stretch;
 }
diff --git a/src/views/search/views/PopularInstitutionsList.module.css b/src/views/search/views/PopularInstitutionsList.module.css
index c6f871622b..5b5b5751a9 100644
--- a/src/views/search/views/PopularInstitutionsList.module.css
+++ b/src/views/search/views/PopularInstitutionsList.module.css
@@ -1,4 +1,4 @@
 .horizontalLine {
-  margin: var(--spacing-1) var(--spacing-1-point-5) var(--spacing-1-point-5);
+  margin: var(--spacing-2) var(--spacing-1-point-5) var(--spacing-1-point-5);
   align-self: stretch;
 }