Merge pull request #18473 from overleaf/ii-bs5-settings-grid-fix

[web] Adjust column breakpoints in bs5 account settings page

GitOrigin-RevId: 90e7fe7561a75439166472627fdb6189ebcdefa1

services/web/frontend/js/features/settings/components/emails/add-email.tsx

@@ -109,7 +109,7 @@ function AddEmail() {
   if (!isFormVisible) {
     return (
       <Layout isError={isError} error={error}>
-        <OLCol md={12}>
+        <OLCol lg={12}>
           <Cell>
             {state.data.emailCount >= emailAddressLimit ? (
               <span className="small">
@@ -152,7 +152,7 @@ function AddEmail() {
       <form>
         <Layout isError={isError} error={error}>
           <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
-          <OLCol md={8}>
+          <OLCol lg={8}>
             <Cell>
               {InputComponent}
               <div className="affiliations-table-cell-tabbed">
@@ -160,10 +160,10 @@ function AddEmail() {
               </div>
             </Cell>
           </OLCol>
-          <OLCol md={4}>
+          <OLCol lg={4}>
             <Cell
               className={bsVersion({
-                bs5: 'text-md-end',
+                bs5: 'text-lg-end',
                 bs3: 'text-md-right',
               })}
             >
@@ -182,7 +182,7 @@ function AddEmail() {
     <form>
       <Layout isError={isError} error={error}>
         <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
-        <OLCol md={8}>
+        <OLCol lg={8}>
           <Cell>
             {InputComponent}
             {!isSsoAvailableForDomain ? (
@@ -205,10 +205,10 @@ function AddEmail() {
           </Cell>
         </OLCol>
         {!isSsoAvailableForDomain ? (
-          <OLCol md={4}>
+          <OLCol lg={4}>
             <Cell
               className={bsVersion({
-                bs5: 'text-md-end',
+                bs5: 'text-lg-end',
                 bs3: 'text-md-right',
               })}
             >
@@ -221,7 +221,7 @@ function AddEmail() {
             </Cell>
           </OLCol>
         ) : (
-          <OLCol md={12}>
+          <OLCol lg={12}>
             <Cell>
               <div className="affiliations-table-cell-tabbed">
                 <SsoLinkingInfo

services/web/frontend/js/features/settings/components/emails/header.tsx

@@ -12,7 +12,7 @@ function Header() {
     <>
       <OLRow>
         <OLCol
-          md={4}
+          lg={4}
           className={bsVersion({
             bs5: 'd-none d-sm-block',
             bs3: 'hidden-xs',
@@ -23,7 +23,7 @@ function Header() {
           </EmailCell>
         </OLCol>
         <OLCol
-          md={8}
+          lg={8}
           className={bsVersion({
             bs5: 'd-none d-sm-block',
             bs3: 'hidden-xs',

services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx

@@ -81,7 +81,7 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
   ) {
     return (
       <OLRow>
-        <OLCol md={12}>
+        <OLCol lg={12}>
           <OLNotification
             type="info"
             content={
@@ -99,7 +99,7 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
   if (userEmailData.affiliation.inReconfirmNotificationPeriod) {
     return (
       <OLRow>
-        <OLCol md={12}>
+        <OLCol lg={12}>
           {isBootstrap5 ? (
             <OLNotification
               type="info"

services/web/frontend/js/features/settings/components/emails/row.tsx

@@ -30,22 +30,22 @@ function EmailsRow({ userEmailData }: EmailsRowProps) {
   return (
     <>
       <OLRow>
-        <OLCol md={4}>
+        <OLCol lg={4}>
           <EmailCell>
             <Email userEmailData={userEmailData} />
           </EmailCell>
         </OLCol>
-        <OLCol md={5}>
+        <OLCol lg={5}>
           {userEmailData.affiliation?.institution && (
             <EmailCell>
               <InstitutionAndRole userEmailData={userEmailData} />
             </EmailCell>
           )}
         </OLCol>
-        <OLCol md={3}>
+        <OLCol lg={3}>
           <EmailCell
             className={bsVersion({
-              bs5: 'text-md-end',
+              bs5: 'text-lg-end',
               bs3: 'text-md-right',
             })}
           >
@@ -94,7 +94,7 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
   if (userEmailData.samlProviderId) {
     return (
       <OLRow>
-        <OLCol md={{ span: 8, offset: 4 }}>
+        <OLCol lg={{ span: 8, offset: 4 }}>
           <EmailCell>
             <p>
               <Trans
@@ -118,10 +118,10 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
 
   return (
     <OLRow>
-      <OLCol md={{ span: 8, offset: 4 }}>
+      <OLCol lg={{ span: 8, offset: 4 }}>
         <div className="horizontal-divider" />
         <OLRow>
-          <OLCol md={9}>
+          <OLCol lg={9}>
             <EmailCell>
               <p className="small">
                 <Trans
@@ -153,9 +153,9 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
             </EmailCell>
           </OLCol>
           <OLCol
-            md={3}
+            lg={3}
             className={bsVersion({
-              bs5: 'text-md-end',
+              bs5: 'text-lg-end',
               bs3: 'text-md-right',
             })}
           >

services/web/frontend/js/features/settings/components/root.tsx

@@ -35,7 +35,7 @@ function SettingsPageRoot() {
   return (
     <div className="container">
       <OLRow>
-        <OLCol md={12} lg={{ span: 10, offset: 1 }}>
+        <OLCol xl={{ span: 10, offset: 1 }}>
           {isReady ? <SettingsPageContent /> : null}
         </OLCol>
       </OLRow>
@@ -60,10 +60,10 @@ function SettingsPageContent() {
           <EmailsSection />
           <SSOAlert />
           <OLRow>
-            <OLCol md={5}>
+            <OLCol lg={5}>
               <AccountInfoSection />
             </OLCol>
-            <OLCol md={{ span: 5, offset: 1 }}>
+            <OLCol lg={{ span: 5, offset: 1 }}>
               <PasswordSection />
             </OLCol>
           </OLRow>

services/web/frontend/js/features/ui/components/ol/ol-col.tsx

@@ -8,23 +8,51 @@ type OLColProps = React.ComponentProps<typeof Col> & {
 
 function OLCol(props: OLColProps) {
   const { bs3Props, ...rest } = props
-  const sizes = new Set(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'])
 
   const getBs3Sizes = (obj: typeof rest) => {
-    return Object.entries(obj).reduce(
+    const bs5ToBs3SizeMap = {
+      xs: undefined,
+      sm: undefined,
+      md: 'sm',
+      lg: 'md',
+      xl: 'lg',
+      xxl: undefined,
+    } as const
+
+    const isBs5ToBs3SizeMapKey = (
+      key: string
+    ): key is keyof typeof bs5ToBs3SizeMap => {
+      return key in bs5ToBs3SizeMap
+    }
+
+    const sizes = Object.entries(obj).reduce(
       (prev, [key, value]) => {
-        if (sizes.has(key)) {
+        if (isBs5ToBs3SizeMapKey(key)) {
-          if (typeof value === 'object') {
+          const bs3Size = bs5ToBs3SizeMap[key]
-            prev[key] = value.span
+
-            prev[`${key}Offset`] = value.offset
+          if (bs3Size) {
-          } else {
+            if (typeof value === 'object') {
-            prev[key] = value
+              prev[bs3Size] = value.span
+              prev[`${bs3Size}Offset`] = value.offset
+            } else {
+              prev[bs3Size] = value
+            }
           }
         }
+
         return prev
       },
       {} as Record<string, (typeof rest)['xs']>
     )
+
+    // Add a default sizing for `col-xs-12` if no sizing is available
+    if (
+      !Object.keys(sizes).some(key => ['xs', 'sm', 'md', 'lg'].includes(key))
+    ) {
+      sizes.xs = 12
+    }
+
+    return sizes
   }
 
   const bs3ColProps: React.ComponentProps<typeof BS3Col> = {