diff --git a/app/javascript/components/workflows/student/exams/show/components/navbar/NavAccordionItem.tsx b/app/javascript/components/workflows/student/exams/show/components/navbar/NavAccordionItem.tsx
index fc34a7400..8cd319b6c 100644
--- a/app/javascript/components/workflows/student/exams/show/components/navbar/NavAccordionItem.tsx
+++ b/app/javascript/components/workflows/student/exams/show/components/navbar/NavAccordionItem.tsx
@@ -36,7 +36,7 @@ const NavAccordionItem: React.FC<NavAccordionItemProps> = (props) => {
       onClick={(): void => onSectionClick(eventKey)}
     >
       <RenderIcon I={Icon} className="" />
-      <span aria-hidden="true" className="width-0">&nbsp;</span>
+      <span aria-hidden="true" className="mw-0">&nbsp;</span>
       <Collapse
         in={expanded}
         dimension="width"
diff --git a/app/javascript/components/workflows/student/exams/show/components/navbar/index.css b/app/javascript/components/workflows/student/exams/show/components/navbar/index.css
index 0c52b7364..04249045c 100644
--- a/app/javascript/components/workflows/student/exams/show/components/navbar/index.css
+++ b/app/javascript/components/workflows/student/exams/show/components/navbar/index.css
@@ -1,9 +1,19 @@
 .sidebar-small {
-  width: var(--sidebar-small);
+  transition: 0.35s max-width ease-in-out, 0.35s min-width ease-in-out;
+  min-width: var(--sidebar-small);
+  max-width: var(--sidebar-small);
 }
 
 .sidebar-expanded {
-  width: var(--sidebar-expanded);
+  transition: 0.35s max-width ease-in-out, 0.35s min-width ease-in-out;
+  min-width: var(--sidebar-expanded);
+  max-width: 50%;
+  resize: horizontal;
+  overflow: auto;
+}
+
+.mw-0 {
+  max-width: 0;
 }
 
 .collapse:not(.width):not(.show) {
diff --git a/app/javascript/components/workflows/student/exams/show/components/navbar/index.tsx b/app/javascript/components/workflows/student/exams/show/components/navbar/index.tsx
index 3a005840f..ea3cb26eb 100644
--- a/app/javascript/components/workflows/student/exams/show/components/navbar/index.tsx
+++ b/app/javascript/components/workflows/student/exams/show/components/navbar/index.tsx
@@ -116,9 +116,7 @@ const ExamNavbar: React.FC<{
   const additionalClass = expanded ? 'sidebar-expanded' : 'sidebar-small';
   return (
     <div
-      id="sidebar"
       className={`
-        transition
         bg-dark
         text-white
         float-left
@@ -140,7 +138,7 @@ const ExamNavbar: React.FC<{
             Hourglass
           </h1>
         </Collapse>
-        <h1 aria-hidden="true" className="width-0">&nbsp;</h1>
+        <h1 aria-hidden="true" className="mw-0">&nbsp;</h1>
         <Button
           className="ml-2"
           onClick={(): void => {