From d3dc4e2e71f4abc79b7090ae2135d2ecd0e7753c Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Wed, 14 May 2025 13:37:11 +0100
Subject: [PATCH 1/5] Print tab titles above each individual tab

---
 src/app/components/elements/Tabs.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/components/elements/Tabs.tsx b/src/app/components/elements/Tabs.tsx
index d4db486df4..36883d147c 100644
--- a/src/app/components/elements/Tabs.tsx
+++ b/src/app/components/elements/Tabs.tsx
@@ -32,8 +32,8 @@ function callOrString(stringOrTabFunction: StringOrTabFunction | undefined, tabT
 }
 
 // e.g.:   Tab 1 | Tab 2 | Tab 3
-const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
-    return <Nav tabs className={classNames("flex-wrap", {"guaranteed-single-line": singleLine})}>
+const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab, className}: TabsProps & {activeTab: number; changeTab: (i: number) => void;}) => {
+    return <Nav tabs className={classNames(className, "flex-wrap", {"guaranteed-single-line": singleLine})}>
         {Object.keys(children).map((tabTitle, mapIndex) => {
             const tabIndex = mapIndex + 1;
             const linkClasses = callOrString(tabTitleClass, tabTitle, tabIndex);
@@ -135,7 +135,7 @@ export const Tabs = (props: TabsProps) => {
         {expandButton}
         <div className={classNames(className, innerClasses, "position-relative")}>
             {style === "tabs"
-                ? <TabNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</TabNavbar>
+                ? <TabNavbar {...props} className="no-print" activeTab={activeTab} changeTab={changeTab}>{children}</TabNavbar>
                 : style === "buttons"
                     ? <ButtonNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</ButtonNavbar>
                     : <DropdownNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</DropdownNavbar>
@@ -144,9 +144,12 @@ export const Tabs = (props: TabsProps) => {
                 <TabContent activeTab={activeTab} className={tabContentClass}>
                     {Object.entries(children).map(([tabTitle, tabBody], mapIndex) => {
                         const tabIndex = mapIndex + 1;
-                        return <TabPane key={tabTitle} tabId={tabIndex}>
-                            {tabBody as ReactNode}
-                        </TabPane>;
+                        return <>
+                            {style === "tabs" && <TabNavbar {...props} className="d-none d-print-flex" activeTab={tabIndex} changeTab={changeTab}>{children}</TabNavbar>}
+                            <TabPane key={tabTitle} tabId={tabIndex}>
+                                {tabBody as ReactNode}
+                            </TabPane>
+                        </>;
                     })}
                 </TabContent>
             </ExpandableParentContext.Provider>

From 168b45f2307ac9c011b2d0dc9a7529c87ca9e9d0 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Wed, 14 May 2025 13:38:06 +0100
Subject: [PATCH 2/5] Change hyperlink to textual link when printing

---
 src/app/components/content/IsaacCodeSnippet.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/components/content/IsaacCodeSnippet.tsx b/src/app/components/content/IsaacCodeSnippet.tsx
index c57ecce962..976035dec8 100644
--- a/src/app/components/content/IsaacCodeSnippet.tsx
+++ b/src/app/components/content/IsaacCodeSnippet.tsx
@@ -56,7 +56,8 @@ const IsaacCodeSnippet = ({doc}: IsaacCodeProps) => {
         </div>
         {doc.url && <Row>
             <Col className="text-center mb-2">
-                <a href={doc.url} onClick={logViewOnGitHub} target="_blank" rel="noopener noreferrer">View on GitHub</a>
+                <a className="no-print" href={doc.url} onClick={logViewOnGitHub} target="_blank" rel="noopener noreferrer">View on GitHub</a>
+                <a className="only-print mb-2" href={doc.url} target="_blank" rel="noopener noreferrer">{doc.url}</a>
             </Col>
         </Row>}
     </>;

From 7316a6e00a1b3b1e5072cc7f2bc15c7182e5e222 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Wed, 14 May 2025 15:38:13 +0100
Subject: [PATCH 3/5] Restore ada print button overlap behaviour

---
 src/scss/cs/button.scss    | 2 +-
 src/scss/cs/questions.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/scss/cs/button.scss b/src/scss/cs/button.scss
index ee5742cac4..880b102193 100644
--- a/src/scss/cs/button.scss
+++ b/src/scss/cs/button.scss
@@ -162,7 +162,7 @@
 
 .print-icon {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   &:not(.outline) {
     @include ada-icon-button-base(48px, 48px, false);
   }
diff --git a/src/scss/cs/questions.scss b/src/scss/cs/questions.scss
index cff03f80d6..bc620072e9 100644
--- a/src/scss/cs/questions.scss
+++ b/src/scss/cs/questions.scss
@@ -13,6 +13,7 @@
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
   z-index: 2;
+  background: $cs-cultured;
   .question-actions-link {
     margin-top: 2px; // Just to vertically center the links nicely
     color: $secondary;

From 78a6bc90a29193fd3ac22ac61e464771561da80a Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Thu, 15 May 2025 14:58:21 +0100
Subject: [PATCH 4/5] Fix test to account for print-only tabs

---
 src/test/pages/AssignmentProgress.test.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/test/pages/AssignmentProgress.test.tsx b/src/test/pages/AssignmentProgress.test.tsx
index 5cf7f5d81c..85e208e682 100644
--- a/src/test/pages/AssignmentProgress.test.tsx
+++ b/src/test/pages/AssignmentProgress.test.tsx
@@ -43,8 +43,11 @@ describe("AssignmentProgress", () => {
         // Clicking on the group title should suffice to open the accordion
         await userEvent.click(groupTitle);
         // Get the two tabs, making sure that they show the correct numbers of assignments in each one
-        const assignmentsTab = await screen.findByRole("button", {name: `Assignments (${mockAssignments.length})`});
-        const testsTab = await screen.findByRole("button", {name: `Tests (${mockTestAssignments.length})`});
+        // (and check that the user-visible "no-print" version of the tab is used)
+        const assignmentsTabs = await screen.findAllByRole("button", {name: `Assignments (${mockAssignments.length})`});
+        const assignmentsTab = assignmentsTabs.filter(tab => tab.classList.contains("no-print"))[0];
+        const testsTabs = await screen.findAllByRole("button", {name: `Tests (${mockTestAssignments.length})`});
+        const testsTab = testsTabs.filter(tab => tab.classList.contains("no-print"))[0];
         await userEvent.click(assignmentsTab);
         for (const assignmentTitle of mockAssignments.map(a => a.gameboard?.title)) {
             await screen.findByText(assignmentTitle, {exact: false});

From 57044845115f5ab4d88aa19977ee001c7792f220 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Mon, 19 May 2025 15:52:01 +0100
Subject: [PATCH 5/5] Fix printed tab header padding

---
 src/app/components/content/IsaacCodeSnippet.tsx | 2 +-
 src/app/components/elements/Tabs.tsx            | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/content/IsaacCodeSnippet.tsx b/src/app/components/content/IsaacCodeSnippet.tsx
index 976035dec8..1cb257ccfa 100644
--- a/src/app/components/content/IsaacCodeSnippet.tsx
+++ b/src/app/components/content/IsaacCodeSnippet.tsx
@@ -57,7 +57,7 @@ const IsaacCodeSnippet = ({doc}: IsaacCodeProps) => {
         {doc.url && <Row>
             <Col className="text-center mb-2">
                 <a className="no-print" href={doc.url} onClick={logViewOnGitHub} target="_blank" rel="noopener noreferrer">View on GitHub</a>
-                <a className="only-print mb-2" href={doc.url} target="_blank" rel="noopener noreferrer">{doc.url}</a>
+                <a className="only-print" href={doc.url} target="_blank" rel="noopener noreferrer">{doc.url}</a>
             </Col>
         </Row>}
     </>;
diff --git a/src/app/components/elements/Tabs.tsx b/src/app/components/elements/Tabs.tsx
index 36883d147c..b7056a7250 100644
--- a/src/app/components/elements/Tabs.tsx
+++ b/src/app/components/elements/Tabs.tsx
@@ -145,7 +145,8 @@ export const Tabs = (props: TabsProps) => {
                     {Object.entries(children).map(([tabTitle, tabBody], mapIndex) => {
                         const tabIndex = mapIndex + 1;
                         return <>
-                            {style === "tabs" && <TabNavbar {...props} className="d-none d-print-flex" activeTab={tabIndex} changeTab={changeTab}>{children}</TabNavbar>}
+                            {/* This navbar exists only when printing so each tab has its own heading */}
+                            {style === "tabs" && <TabNavbar {...props} className={classNames("d-none d-print-flex mb-3 mt-2", {"mt-n4": mapIndex === 0 && tabContentClass.includes("pt-4")})} activeTab={tabIndex} changeTab={changeTab}>{children}</TabNavbar>}
                             <TabPane key={tabTitle} tabId={tabIndex}>
                                 {tabBody as ReactNode}
                             </TabPane>