From 2a72a85efdbca452a7f575c38ceaef5b1df18e11 Mon Sep 17 00:00:00 2001
From: leangseu-edx <83240113+leangseu-edx@users.noreply.github.com>
Date: Mon, 7 Nov 2022 15:06:09 -0500
Subject: [PATCH] chore: responsive course card (#64)

---
 src/containers/CourseCard/CourseCard.scss     | 13 ++++-
 .../__snapshots__/index.test.jsx.snap         | 14 ++++++
 .../CourseCardActions/ActionButton/hooks.js   |  8 ++++
 .../ActionButton/hooks.test.js                | 21 ++++++++
 .../CourseCardActions/ActionButton/index.jsx  | 16 +++++++
 .../ActionButton/index.test.jsx               | 25 ++++++++++
 .../CourseCardActions/BeginCourseButton.jsx   |  6 +--
 .../BeginCourseButton.test.jsx                |  1 +
 .../CourseCardActions/ResumeButton.jsx        |  6 +--
 .../CourseCardActions/ResumeButton.test.jsx   |  1 +
 .../CourseCardActions/SelectSessionButton.jsx |  6 +--
 .../SelectSessionButton.test.jsx              |  1 +
 .../CourseCardActions/UpgradeButton.jsx       |  6 +--
 .../CourseCardActions/UpgradeButton.test.jsx  |  1 +
 .../CourseCardActions/ViewCourseButton.jsx    |  6 +--
 .../ViewCourseButton.test.jsx                 |  6 ++-
 .../BeginCourseButton.test.jsx.snap           |  4 +-
 .../__snapshots__/ResumeButton.test.jsx.snap  |  4 +-
 .../SelectSessionButton.test.jsx.snap         | 12 ++---
 .../__snapshots__/UpgradeButton.test.jsx.snap | 12 ++---
 .../ViewCourseButton.test.jsx.snap            |  8 ++--
 .../CourseCardActions/index.test.jsx          |  1 +
 .../components/CourseCardContent.jsx          | 20 ++------
 .../__snapshots__/index.test.jsx.snap         |  2 +-
 .../components/RelatedProgramsBadge/index.jsx |  2 +-
 .../CourseCardContent.test.jsx.snap           | 26 +++++-----
 src/containers/Dashboard/DashboardLayout.jsx  |  4 --
 .../DashboardLayout.test.jsx.snap             | 48 -------------------
 .../__snapshots__/index.test.jsx.snap         | 10 ++--
 src/containers/MasqueradeBar/index.jsx        |  2 +-
 src/data/constants/htmlKeys.js                |  1 +
 31 files changed, 164 insertions(+), 129 deletions(-)
 create mode 100644 src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap
 create mode 100644 src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
 create mode 100644 src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
 create mode 100644 src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
 create mode 100644 src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx

diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss
index 0c42580..f87c67e 100644
--- a/src/containers/CourseCard/CourseCard.scss
+++ b/src/containers/CourseCard/CourseCard.scss
@@ -15,8 +15,17 @@
     .pgn__card-header-content {
       margin-top: 1.5rem;
     }
-    .pgn__card-footer .pgn__action-row {
-      white-space: nowrap;
+    .pgn__card-footer {
+      flex-wrap: nowrap;
+
+      &.vertical {
+        flex-direction: column;
+      }
+
+      .pgn__action-row {
+        align-self: flex-end;
+        white-space: nowrap;
+      }
     }
 
     .course-card-verify-ribbon-container {
diff --git a/src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..13ddef0
--- /dev/null
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionButton snapshot is collapsed 1`] = `
+<Button
+  arbitary="props"
+  size="sm"
+/>
+`;
+
+exports[`ActionButton snapshot is not collapsed 1`] = `
+<Button
+  arbitary="props"
+/>
+`;
diff --git a/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
new file mode 100644
index 0000000..da01423
--- /dev/null
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
@@ -0,0 +1,8 @@
+import { useWindowSize, breakpoints } from '@edx/paragon';
+
+export const useIsCollapsed = () => {
+  const { width } = useWindowSize();
+  return width < breakpoints.medium.maxWidth && width > breakpoints.small.maxWidth;
+};
+
+export default useIsCollapsed;
diff --git a/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
new file mode 100644
index 0000000..e5ba8f5
--- /dev/null
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
@@ -0,0 +1,21 @@
+import { useWindowSize, breakpoints } from '@edx/paragon';
+import useIsCollapsed from './hooks';
+
+describe('useIsCollapsed', () => {
+  it('returns true only when it is between medium and small', () => {
+    // make sure all three breakpoints gap is large enough for test
+    expect(
+      (breakpoints.large.maxWidth - 1)
+      > (breakpoints.medium.maxWidth - 1)
+      && (breakpoints.medium.maxWidth - 1)
+      > (breakpoints.small.maxWidth - 1),
+    ).toBe(true);
+
+    useWindowSize.mockReturnValue({ width: breakpoints.large.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(false);
+    useWindowSize.mockReturnValue({ width: breakpoints.medium.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(true);
+    useWindowSize.mockReturnValue({ width: breakpoints.small.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(false);
+  });
+});
diff --git a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
new file mode 100644
index 0000000..e989b69
--- /dev/null
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from '@edx/paragon';
+
+import useIsCollapsed from './hooks';
+
+export const ActionButton = (props) => {
+  const isSmall = useIsCollapsed();
+  return (
+    <Button
+      {...props}
+      {...isSmall && { size: 'sm' }}
+    />
+  );
+};
+
+export default ActionButton;
diff --git a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
new file mode 100644
index 0000000..d5eb07f
--- /dev/null
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
@@ -0,0 +1,25 @@
+import { shallow } from 'enzyme';
+
+import ActionButton from '.';
+
+import useIsCollapsed from './hooks';
+
+jest.mock('./hooks', () => jest.fn());
+
+describe('ActionButton', () => {
+  const props = {
+    arbitary: 'props',
+  };
+  describe('snapshot', () => {
+    test('is collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(true);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is not collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(false);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
index 36b449d..4c61c4f 100644
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { hooks } from 'data/redux';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const BeginCourseButton = ({ cardId }) => {
@@ -13,13 +13,13 @@ export const BeginCourseButton = ({ cardId }) => {
   const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
-    <Button
+    <ActionButton
       disabled={isMasquerading || !hasAccess}
       as="a"
       href={homeUrl}
     >
       {formatMessage(messages.beginCourse)}
-    </Button>
+    </ActionButton>
   );
 };
 BeginCourseButton.propTypes = {
diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
index efae4e2..2a658be 100644
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
@@ -11,6 +11,7 @@ jest.mock('data/redux', () => ({
     useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
   },
 }));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 let wrapper;
 const { homeUrl } = hooks.useCardCourseRunData();
diff --git a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
index ea85c56..80c3097 100644
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { hooks } from 'data/redux';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const ResumeButton = ({ cardId }) => {
@@ -13,13 +13,13 @@ export const ResumeButton = ({ cardId }) => {
   const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
-    <Button
+    <ActionButton
       disabled={isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired)}
       as="a"
       href={resumeUrl}
     >
       {formatMessage(messages.resume)}
-    </Button>
+    </ActionButton>
   );
 };
 ResumeButton.propTypes = {
diff --git a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
index c0f57ca..5ca98a8 100644
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
@@ -15,6 +15,7 @@ jest.mock('data/redux', () => ({
     useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
   },
 }));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 const { resumeUrl } = hooks.useCardCourseRunData();
 
diff --git a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
index 2d68f73..bd37f72 100644
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { hooks } from 'data/redux';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const SelectSessionButton = ({ cardId }) => {
@@ -14,12 +14,12 @@ export const SelectSessionButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const openSessionModal = hooks.useUpdateSelectSessionModalCallback(cardId);
   return (
-    <Button
+    <ActionButton
       disabled={isMasquerading || !hasAccess || (!canChange || !hasSessions)}
       onClick={openSessionModal}
     >
       {formatMessage(messages.selectSession)}
-    </Button>
+    </ActionButton>
   );
 };
 SelectSessionButton.propTypes = {
diff --git a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
index b591755..646dfde 100644
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
@@ -12,6 +12,7 @@ jest.mock('data/redux', () => ({
     useUpdateSelectSessionModalCallback: () => jest.fn().mockName('mockOpenSessionModal'),
   },
 }));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 let wrapper;
 
diff --git a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
index 28122f8..6d05caa 100644
--- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { Locked } from '@edx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { hooks } from 'data/redux';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const UpgradeButton = ({ cardId }) => {
@@ -15,14 +15,14 @@ export const UpgradeButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const isEnabled = (!isMasquerading && canUpgrade);
   return (
-    <Button
+    <ActionButton
       iconBefore={Locked}
       variant="outline-primary"
       disabled={!isEnabled}
       {...isEnabled && { as: 'a', href: upgradeUrl }}
     >
       {formatMessage(messages.upgrade)}
-    </Button>
+    </ActionButton>
   );
 };
 UpgradeButton.propTypes = {
diff --git a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
index 8942d1f..5d88fc7 100644
--- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
@@ -11,6 +11,7 @@ jest.mock('data/redux', () => ({
     useCardEnrollmentData: jest.fn(() => ({ canUpgrade: true })),
   },
 }));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 describe('UpgradeButton', () => {
   const props = {
diff --git a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
index 7703c4e..5f9e3da 100644
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { hooks } from 'data/redux';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const ViewCourseButton = ({ cardId }) => {
@@ -12,13 +12,13 @@ export const ViewCourseButton = ({ cardId }) => {
   const { hasAccess } = hooks.useCardEnrollmentData(cardId);
   const { formatMessage } = useIntl();
   return (
-    <Button
+    <ActionButton
       disabled={!hasAccess}
       as="a"
       href={homeUrl}
     >
       {formatMessage(messages.viewCourse)}
-    </Button>
+    </ActionButton>
   );
 };
 ViewCourseButton.propTypes = {
diff --git a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
index d25764d..0f88968 100644
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
@@ -11,20 +11,22 @@ jest.mock('data/redux', () => ({
     useCardEntitlementData: jest.fn(),
   },
 }));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 let wrapper;
-const props = { cardId: 'cardId' };
+const defaultProps = { cardId: 'cardId' };
 const homeUrl = 'homeUrl';
 
 const createWrapper = ({
   hasAccess = false,
   isEntitlement = false,
   isExpired = false,
+  propsOveride = {},
 }) => {
   hooks.useCardCourseRunData.mockReturnValue({ homeUrl });
   hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess });
   hooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isExpired });
-  return shallow(<ViewCourseButton {...props} />);
+  return shallow(<ViewCourseButton {...defaultProps} {...propsOveride} />);
 };
 
 describe('ViewCourseButton', () => {
diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap
index 33b14b9..aa9aff2 100644
--- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BeginCourseButton snapshot renders default button when learner has access to the course 1`] = `
-<Button
+<ActionButton
   as="a"
   disabled={false}
   href="home-url"
 >
   Begin Course
-</Button>
+</ActionButton>
 `;
diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap
index b1687b4..9ea197c 100644
--- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ResumeButton snapshot renders default button when learner has access to the course 1`] = `
-<Button
+<ActionButton
   as="a"
   disabled={false}
   href="resumeUrl"
 >
   Resume
-</Button>
+</ActionButton>
 `;
diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap
index 028a6df..07ec3be 100644
--- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap
@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SelectSessionButton snapshot renders default button 1`] = `
-<Button
+<ActionButton
   disabled={false}
   onClick={[MockFunction mockOpenSessionModal]}
 >
   Select Session
-</Button>
+</ActionButton>
 `;
 
 exports[`SelectSessionButton snapshot renders disabled button if masquerading 1`] = `
-<Button
+<ActionButton
   disabled={true}
   onClick={[MockFunction mockOpenSessionModal]}
 >
   Select Session
-</Button>
+</ActionButton>
 `;
 
 exports[`SelectSessionButton snapshot renders disabled button when user does not have access to the course 1`] = `
-<Button
+<ActionButton
   disabled={true}
   onClick={[MockFunction mockOpenSessionModal]}
 >
   Select Session
-</Button>
+</ActionButton>
 `;
diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap
index 4dce656..0277bc1 100644
--- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UpgradeButton snapshot can upgrade 1`] = `
-<Button
+<ActionButton
   as="a"
   disabled={false}
   href="upgradeUrl"
@@ -9,25 +9,25 @@ exports[`UpgradeButton snapshot can upgrade 1`] = `
   variant="outline-primary"
 >
   Upgrade
-</Button>
+</ActionButton>
 `;
 
 exports[`UpgradeButton snapshot cannot upgrade 1`] = `
-<Button
+<ActionButton
   disabled={true}
   iconBefore={[MockFunction icons.Locked]}
   variant="outline-primary"
 >
   Upgrade
-</Button>
+</ActionButton>
 `;
 
 exports[`UpgradeButton snapshot masquerading 1`] = `
-<Button
+<ActionButton
   disabled={true}
   iconBefore={[MockFunction icons.Locked]}
   variant="outline-primary"
 >
   Upgrade
-</Button>
+</ActionButton>
 `;
diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap
index d137bd9..da92a1f 100644
--- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ViewCourseButton learner does not have access to course snapshot 1`] = `
-<Button
+<ActionButton
   as="a"
   disabled={true}
   href="homeUrl"
 >
   View Course
-</Button>
+</ActionButton>
 `;
 
 exports[`ViewCourseButton learner has access to course snapshot 1`] = `
-<Button
+<ActionButton
   as="a"
   disabled={false}
   href="homeUrl"
 >
   View Course
-</Button>
+</ActionButton>
 `;
diff --git a/src/containers/CourseCard/components/CourseCardActions/index.test.jsx b/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
index cb45faf..d3574be 100644
--- a/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
@@ -1,6 +1,7 @@
 import { shallow } from 'enzyme';
 
 import { hooks } from 'data/redux';
+
 import CourseCardActions from '.';
 
 jest.mock('data/redux', () => ({
diff --git a/src/containers/CourseCard/components/CourseCardContent.jsx b/src/containers/CourseCard/components/CourseCardContent.jsx
index d2e707b..5939ed5 100644
--- a/src/containers/CourseCard/components/CourseCardContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardContent.jsx
@@ -55,22 +55,10 @@ export const CourseCardContent = ({ cardId, orientation }) => {
         <Card.Section className="pt-0">
           <CourseCardDetails cardId={cardId} />
         </Card.Section>
-        {orientation === 'vertical'
-          ? (
-            <>
-              <RelatedProgramsBadge cardId={cardId} />
-              <Card.Footer orientation="horizontal">
-                <CourseCardActions cardId={cardId} />
-              </Card.Footer>
-            </>
-          ) : (
-            <Card.Footer
-              orientation="vertical"
-              textElement={<RelatedProgramsBadge cardId={cardId} />}
-            >
-              <CourseCardActions cardId={cardId} />
-            </Card.Footer>
-          )}
+        <Card.Footer orientation={orientation}>
+          <RelatedProgramsBadge cardId={cardId} />
+          <CourseCardActions cardId={cardId} />
+        </Card.Footer>
       </Card.Body>
     </>
   );
diff --git a/src/containers/CourseCard/components/RelatedProgramsBadge/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/RelatedProgramsBadge/__snapshots__/index.test.jsx.snap
index 35d4e79..3b56629 100644
--- a/src/containers/CourseCard/components/RelatedProgramsBadge/__snapshots__/index.test.jsx.snap
+++ b/src/containers/CourseCard/components/RelatedProgramsBadge/__snapshots__/index.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`RelatedProgramsBadge component snapshot: 3 programs 1`] = `
 <Fragment>
   <Button
-    className="pl-0 mr-0"
+    className="pl-0 mr-0 justify-content-start align-self-start flex-shrink-1"
     data-testid="RelatedProgramsBadge"
     onClick={[MockFunction useRelatedProgramsBadge.openModal]}
     size="sm"
diff --git a/src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx b/src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx
index c50dd40..a0a5f70 100644
--- a/src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx
+++ b/src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx
@@ -20,7 +20,7 @@ export const RelatedProgramsBadge = ({ cardId }) => {
     <>
       <Button
         data-testid="RelatedProgramsBadge"
-        className="pl-0 mr-0"
+        className="pl-0 mr-0 justify-content-start align-self-start flex-shrink-1"
         variant="tertiary"
         size="sm"
         onClick={openModal}
diff --git a/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap b/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap
index 610125f..26d6449 100644
--- a/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap
+++ b/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap
@@ -38,12 +38,12 @@ exports[`CourseCardContent snapshot not verified 1`] = `
         cardId="test-card-id"
       />
     </Card.Section>
-    <RelatedProgramsBadge
-      cardId="test-card-id"
-    />
     <Card.Footer
-      orientation="horizontal"
+      orientation="vertical"
     >
+      <RelatedProgramsBadge
+        cardId="test-card-id"
+      />
       <CourseCardActions
         cardId="test-card-id"
       />
@@ -107,13 +107,11 @@ exports[`CourseCardContent snapshot orientation horizontal 1`] = `
       />
     </Card.Section>
     <Card.Footer
-      orientation="vertical"
-      textElement={
-        <RelatedProgramsBadge
-          cardId="test-card-id"
-        />
-      }
+      orientation="horizontal"
     >
+      <RelatedProgramsBadge
+        cardId="test-card-id"
+      />
       <CourseCardActions
         cardId="test-card-id"
       />
@@ -176,12 +174,12 @@ exports[`CourseCardContent snapshot orientation vertical 1`] = `
         cardId="test-card-id"
       />
     </Card.Section>
-    <RelatedProgramsBadge
-      cardId="test-card-id"
-    />
     <Card.Footer
-      orientation="horizontal"
+      orientation="vertical"
     >
+      <RelatedProgramsBadge
+        cardId="test-card-id"
+      />
       <CourseCardActions
         cardId="test-card-id"
       />
diff --git a/src/containers/Dashboard/DashboardLayout.jsx b/src/containers/Dashboard/DashboardLayout.jsx
index a748477..f17e4ad 100644
--- a/src/containers/Dashboard/DashboardLayout.jsx
+++ b/src/containers/Dashboard/DashboardLayout.jsx
@@ -7,14 +7,10 @@ import hooks from './hooks';
 
 export const columnConfig = {
   courseList: {
-    sm: { span: 12, offset: 0 },
-    md: { span: 10, offset: 1 },
     lg: { span: 12, offset: 0 },
     xl: { span: 8, offset: 0 },
   },
   sidebar: {
-    sm: { span: 12, offset: 0 },
-    md: { span: 10, offset: 1 },
     lg: { span: 12, offset: 0 },
     xl: { span: 4, offset: 0 },
   },
diff --git a/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap b/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap
index 71408b7..a622da4 100644
--- a/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap
+++ b/src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap
@@ -14,18 +14,6 @@ exports[`DashboardLayout collapsed snapshot 1`] = `
           "span": 12,
         }
       }
-      md={
-        Object {
-          "offset": 1,
-          "span": 10,
-        }
-      }
-      sm={
-        Object {
-          "offset": 0,
-          "span": 12,
-        }
-      }
       xl={
         Object {
           "offset": 0,
@@ -43,18 +31,6 @@ exports[`DashboardLayout collapsed snapshot 1`] = `
           "span": 12,
         }
       }
-      md={
-        Object {
-          "offset": 1,
-          "span": 10,
-        }
-      }
-      sm={
-        Object {
-          "offset": 0,
-          "span": 12,
-        }
-      }
       xl={
         Object {
           "offset": 0,
@@ -82,18 +58,6 @@ exports[`DashboardLayout not collapsed snapshot 1`] = `
           "span": 12,
         }
       }
-      md={
-        Object {
-          "offset": 1,
-          "span": 10,
-        }
-      }
-      sm={
-        Object {
-          "offset": 0,
-          "span": 12,
-        }
-      }
       xl={
         Object {
           "offset": 0,
@@ -111,18 +75,6 @@ exports[`DashboardLayout not collapsed snapshot 1`] = `
           "span": 12,
         }
       }
-      md={
-        Object {
-          "offset": 1,
-          "span": 10,
-        }
-      }
-      sm={
-        Object {
-          "offset": 0,
-          "span": 12,
-        }
-      }
       xl={
         Object {
           "offset": 0,
diff --git a/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap b/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
index 42af13c..30876ac 100644
--- a/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
+++ b/src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
   className="w-100 shadow-sm px-2"
 >
   <Form
-    className="masquerade-bar col-sm-12 col-md-10 col-12"
+    className="masquerade-bar w-100"
   >
     <FormLabel
       className="masquerade-form-label"
@@ -47,7 +47,7 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
   className="w-100 shadow-sm px-2"
 >
   <Form
-    className="masquerade-bar col-sm-12 col-md-10 col-12"
+    className="masquerade-bar w-100"
   >
     <FormLabel
       className="masquerade-form-label"
@@ -91,7 +91,7 @@ exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
   className="w-100 shadow-sm px-2"
 >
   <Form
-    className="masquerade-bar col-sm-12 col-md-10 col-12"
+    className="masquerade-bar w-100"
   >
     <FormLabel
       className="masquerade-form-label"
@@ -137,7 +137,7 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
   className="w-100 shadow-sm px-2"
 >
   <Form
-    className="masquerade-bar col-sm-12 col-md-10 col-12"
+    className="masquerade-bar w-100"
   >
     <FormLabel
       className="masquerade-form-label"
@@ -179,7 +179,7 @@ exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
   className="w-100 shadow-sm px-2"
 >
   <Form
-    className="masquerade-bar col-sm-12 col-md-10 col-12"
+    className="masquerade-bar w-100"
   >
     <FormLabel
       className="masquerade-form-label"
diff --git a/src/containers/MasqueradeBar/index.jsx b/src/containers/MasqueradeBar/index.jsx
index a3b9873..418fc87 100644
--- a/src/containers/MasqueradeBar/index.jsx
+++ b/src/containers/MasqueradeBar/index.jsx
@@ -37,7 +37,7 @@ export const MasqueradeBar = () => {
 
   return (
     <div className="w-100 shadow-sm px-2">
-      <Form className="masquerade-bar col-sm-12 col-md-10 col-12">
+      <Form className="masquerade-bar w-100">
         {isMasquerading ? (
           <>
             <FormLabel inline className="masquerade-form-label">
diff --git a/src/data/constants/htmlKeys.js b/src/data/constants/htmlKeys.js
index 887a83f..f384ada 100644
--- a/src/data/constants/htmlKeys.js
+++ b/src/data/constants/htmlKeys.js
@@ -12,6 +12,7 @@ export const htmlProps = StrictDict({
   onClick: 'onClick',
   onChange: 'onChange',
   onBlur: 'onBlur',
+  size: 'size',
 });
 
 export default {