fix: APP-533 credit class type and methodology layout (#2589)

Author: blushi

web-components/src/components/atoms/CardRibbon/CardRibbon.tsx

@@ -14,6 +14,7 @@ export interface Props {
   labelMobileSize?: LabelSize;
   sx?: SxProps<Theme>;
   sxIcon?: SxProps<Theme>;
+  className?: string;
 }
 const CardRibbon = ({
   icon,
@@ -22,9 +23,11 @@ const CardRibbon = ({
   labelMobileSize = 'xs',
   sx = [],
   sxIcon = [],
+  className,
 }: Props): JSX.Element => {
   return (
     <Flex
+      className={className}
       sx={[
         {
           background:

web-components/src/components/cards/CreditClassCard/CreditClassCard.tsx

@@ -65,6 +65,7 @@ const CreditClassCard = ({
       >
         {type && (
           <CardRibbon
+            className="max-w-[80%] sm:max-w-[200px]"
             icon={type.icon}
             label={type.name}
             labelSize="xs"
@@ -127,7 +128,11 @@ const CreditClassCard = ({
               <CreditClassCardItem
                 label={offsetGenerationMethodLabel}
                 items={generationMethods}
-                sx={{ maxWidth: { sm: 195 }, mr: 5, mb: { xs: 5, sm: 0 } }}
+                sx={{
+                  maxWidth: { sm: methodology ? 195 : undefined },
+                  mr: 5,
+                  mb: { xs: 5, sm: 0 },
+                }}
                 sxListContainer={{
                   flexDirection: 'column',
                   alignItems: 'flex-start',
@@ -139,7 +144,7 @@ const CreditClassCard = ({
               <CreditClassCardItem
                 label={methodologyLabel}
                 link={methodology}
-                sx={{ maxWidth: { sm: 195 } }}
+                sx={{ maxWidth: { sm: generationMethods ? 195 : undefined } }}
               />
             )}
           </Flex>

web-components/src/theme/muiTheme.ts

@@ -5,7 +5,7 @@ const defaultTheme = createTheme({
   breakpoints: {
     values: {
       xs: 0,
-      sm: 600,
+      sm: 640,
       tablet: 834,
       md: 1024,
       lg: 1280,