From 441b3065b4ae73609cea7305e58b06309f3b3e40 Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Tue, 24 Feb 2026 11:53:41 +0000
Subject: [PATCH 1/3] Adjust fullWidth layout to accommodate status

---
 .../components/elements/list-groups/AbstractListViewItem.tsx  | 4 ++--
 src/app/components/pages/MyProgress.tsx                       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index 309f4fd3ba..6141835f2b 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -194,7 +194,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     {isGameboard && typedProps.board?.contents && <ItemCount count={typedProps.board.contents.length} />}
                 </div>
                 <div className={classNames("align-content-center text-overflow-ellipsis", siteSpecific("pe-2", "py-3"))}>
-                    <div className="d-flex text-wrap mt-n1">
+                    <div className={classNames("text-wrap mt-n1", {"d-flex": fullWidth})}>
                         {url && !isDisabled
                             ? (url.startsWith("http")
                                 ? <ExternalLink href={url} className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz})}>
@@ -210,7 +210,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                         }
                         {isItem && <>
                             {typedProps.quizTag && <span className="quiz-level-1-tag ms-sm-2">{typedProps.quizTag}</span>}
-                            <QuestionPropertyTags className="ms-2 justify-self-end" deprecated={typedProps.deprecated} supersededBy={typedProps.supersededBy} tags={tags} />
+                            <QuestionPropertyTags className={classNames("justify-self-end", {"ms-2": fullWidth})} deprecated={typedProps.deprecated} supersededBy={typedProps.supersededBy} tags={tags} />
                         </>}
                     </div>
                     {subtitle && <div className="small text-muted text-wrap">
diff --git a/src/app/components/pages/MyProgress.tsx b/src/app/components/pages/MyProgress.tsx
index 733a34d9a8..3a8e7675da 100644
--- a/src/app/components/pages/MyProgress.tsx
+++ b/src/app/components/pages/MyProgress.tsx
@@ -188,11 +188,11 @@ const MyProgress = ({user}: MyProgressProps) => {
                     <Row id="progress-questions">
                         {progress?.mostRecentQuestions && progress?.mostRecentQuestions.length > 0 && <Col md={12} lg={6} className="mt-4">
                             <h4>Most recently answered questions</h4>
-                            <ListView type="item" items={progress.mostRecentQuestions} fullWidth={below["lg"](screenSize)} className="bordered"/>
+                            <ListView type="item" items={progress.mostRecentQuestions} fullWidth={["lg", "xl"].includes(screenSize)} className="bordered"/>
                         </Col>}
                         {progress?.oldestIncompleteQuestions && progress?.oldestIncompleteQuestions.length > 0 && <Col md={12} lg={6} className="mt-4">
                             <h4>Oldest unsolved questions</h4>
-                            <ListView type="item" items={progress.oldestIncompleteQuestions} fullWidth={below["lg"](screenSize)} className="bordered"/>
+                            <ListView type="item" items={progress.oldestIncompleteQuestions} fullWidth={["lg", "xl"].includes(screenSize)} className="bordered"/>
                         </Col>}
                     </Row>
                 </div>

From 52c6d72d1e504adf1bef0ecb4c5eb75cb0e3251b Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Tue, 24 Feb 2026 12:21:26 +0000
Subject: [PATCH 2/3] Wrap title tags on explicitly small ALVI layouts

---
 .../elements/list-groups/AbstractListViewItem.tsx    | 12 +++++++-----
 src/app/components/elements/list-groups/ListView.tsx |  2 +-
 src/app/components/pages/MyProgress.tsx              |  4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/components/elements/list-groups/AbstractListViewItem.tsx b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
index 6141835f2b..2fe1a108be 100644
--- a/src/app/components/elements/list-groups/AbstractListViewItem.tsx
+++ b/src/app/components/elements/list-groups/AbstractListViewItem.tsx
@@ -159,14 +159,14 @@ export type AbstractListViewItemProps = {
     subtitle?: string;
     breadcrumb?: string[];
     tags?: string[];
-    fullWidth?: boolean;
+    forceFullWidth?: boolean;
     url?: string;
     state?: AbstractListViewItemState;
     className?: string;
     hasCaret?: boolean;
 } & ALVIType & ALVILayout;
 
-export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb, tags, fullWidth, url, state, className, hasCaret, ...typedProps}: AbstractListViewItemProps) => { 
+export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb, tags, forceFullWidth, url, state, className, hasCaret, ...typedProps}: AbstractListViewItemProps) => { 
     const deviceSize = useDeviceSize();
     const user = useAppSelector(selectors.user.orNull);
 
@@ -179,7 +179,9 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
     const isCrossTopic = isAda && tags?.includes("cross_topic");
     const isLLM = tags?.includes("llm_question_page");
 
-    fullWidth = fullWidth || below["sm"](deviceSize) || (isItem && !(typedProps.status || typedProps.audienceViews));
+    const fullWidth = forceFullWidth || below["sm"](deviceSize) || (isItem && !(typedProps.status || typedProps.audienceViews));
+    const wrapTitleTags = below["xs"](deviceSize) || (isDefined(forceFullWidth) && !forceFullWidth);
+
     const cardBody = <>
         <div className="w-100 d-flex flex-row">
             <Col className={classNames("d-flex flex-grow-1", {"mt-3": isCard, "mb-3": isCard && !typedProps.linkTags?.length})}>
@@ -194,7 +196,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                     {isGameboard && typedProps.board?.contents && <ItemCount count={typedProps.board.contents.length} />}
                 </div>
                 <div className={classNames("align-content-center text-overflow-ellipsis", siteSpecific("pe-2", "py-3"))}>
-                    <div className={classNames("text-wrap mt-n1", {"d-flex": fullWidth})}>
+                    <div className={classNames("text-wrap mt-n1", {"d-flex": !wrapTitleTags})}>
                         {url && !isDisabled
                             ? (url.startsWith("http")
                                 ? <ExternalLink href={url} className={classNames("alvi-title", {"question-link-title": isPhy || !isQuiz})}>
@@ -210,7 +212,7 @@ export const AbstractListViewItem = ({title, icon, subject, subtitle, breadcrumb
                         }
                         {isItem && <>
                             {typedProps.quizTag && <span className="quiz-level-1-tag ms-sm-2">{typedProps.quizTag}</span>}
-                            <QuestionPropertyTags className={classNames("justify-self-end", {"ms-2": fullWidth})} deprecated={typedProps.deprecated} supersededBy={typedProps.supersededBy} tags={tags} />
+                            <QuestionPropertyTags className={classNames("justify-self-end", {"ms-2": !wrapTitleTags})} deprecated={typedProps.deprecated} supersededBy={typedProps.supersededBy} tags={tags} />
                         </>}
                     </div>
                     {subtitle && <div className="small text-muted text-wrap">
diff --git a/src/app/components/elements/list-groups/ListView.tsx b/src/app/components/elements/list-groups/ListView.tsx
index 1e2821c3c4..1ae7b3860e 100644
--- a/src/app/components/elements/list-groups/ListView.tsx
+++ b/src/app/components/elements/list-groups/ListView.tsx
@@ -348,7 +348,7 @@ type ListViewItemProps =
 
 type ListViewProps<T, G extends "item" | "gameboard" | "quiz"> = {
     className?: string;
-    fullWidth?: boolean;
+    forceFullWidth?: boolean;
     hasCaret?: boolean;
 } & (
     {
diff --git a/src/app/components/pages/MyProgress.tsx b/src/app/components/pages/MyProgress.tsx
index 3a8e7675da..82df66c45b 100644
--- a/src/app/components/pages/MyProgress.tsx
+++ b/src/app/components/pages/MyProgress.tsx
@@ -188,11 +188,11 @@ const MyProgress = ({user}: MyProgressProps) => {
                     <Row id="progress-questions">
                         {progress?.mostRecentQuestions && progress?.mostRecentQuestions.length > 0 && <Col md={12} lg={6} className="mt-4">
                             <h4>Most recently answered questions</h4>
-                            <ListView type="item" items={progress.mostRecentQuestions} fullWidth={["lg", "xl"].includes(screenSize)} className="bordered"/>
+                            <ListView type="item" items={progress.mostRecentQuestions} forceFullWidth={["sm", "lg", "xl"].includes(screenSize)} className="bordered"/>
                         </Col>}
                         {progress?.oldestIncompleteQuestions && progress?.oldestIncompleteQuestions.length > 0 && <Col md={12} lg={6} className="mt-4">
                             <h4>Oldest unsolved questions</h4>
-                            <ListView type="item" items={progress.oldestIncompleteQuestions} fullWidth={["lg", "xl"].includes(screenSize)} className="bordered"/>
+                            <ListView type="item" items={progress.oldestIncompleteQuestions} forceFullWidth={["sm", "lg", "xl"].includes(screenSize)} className="bordered"/>
                         </Col>}
                     </Row>
                 </div>

From 0ac2652407271308f9b552c3eaef829e790a45cc Mon Sep 17 00:00:00 2001
From: Sol Dubock <94075844+sjd210@users.noreply.github.com>
Date: Tue, 24 Feb 2026 12:35:17 +0000
Subject: [PATCH 3/3] Remove unused import

---
 src/app/components/pages/MyProgress.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/pages/MyProgress.tsx b/src/app/components/pages/MyProgress.tsx
index 82df66c45b..5c1f29cef6 100644
--- a/src/app/components/pages/MyProgress.tsx
+++ b/src/app/components/pages/MyProgress.tsx
@@ -11,7 +11,6 @@ import {
 import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
 import { Card, CardBody, Col, Container, Row } from "reactstrap";
 import {
-    below,
     BookHiddenState,
     HUMAN_QUESTION_TYPES,
     ISAAC_BOOKS_BY_TAG,