From 2ff9896c3038ac5b016e41166a5605bcdf11b835 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 15 Dec 2025 12:12:42 -0700
Subject: [PATCH] Improve layout

---
 web/src/components/card/ExportCard.tsx |  2 +-
 web/src/pages/Exports.tsx              | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index 88000e54c..fc7964c18 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -188,7 +188,7 @@ export function ExportCard({
         )}
         {!exportedRecording.in_progress && (
           <div className="absolute bottom-2 right-3 z-40">
-            <DropdownMenu>
+            <DropdownMenu modal={false}>
               <DropdownMenuTrigger>
                 <BlurredIconButton
                   aria-label={t("tooltip.editName")}
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 2c78b658a..70fa5d5b8 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -333,7 +333,7 @@ function AllExportsView({
           {filteredCases.length > 0 && (
             <div className="space-y-2">
               <Heading as="h4">{t("headings.cases")}</Heading>
-              <div className="grid size-full gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                 {cases?.map((item) => (
                   <CaseCard
                     key={item.name}
@@ -357,7 +357,7 @@ function AllExportsView({
               <Heading as="h4">{t("headings.uncategorizedExports")}</Heading>
               <div
                 ref={contentRef}
-                className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                className="scrollbar-container grid gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
               >
                 {exports.map((item) => (
                   <ExportCard
@@ -439,7 +439,7 @@ function CaseView({
       </div>
       <div
         ref={contentRef}
-        className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+        className="scrollbar-container grid gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
       >
         {exports?.map((item) => (
           <ExportCard
@@ -476,10 +476,12 @@ function CaseAssignmentDialog({
   const { t } = useTranslation(["views/exports"]);
   const caseOptions = useMemo(
     () => [
-      ...(cases ?? []).map((c) => ({
-        value: c.id,
-        label: c.name,
-      })),
+      ...(cases ?? [])
+        .map((c) => ({
+          value: c.id,
+          label: c.name,
+        }))
+        .sort((cA, cB) => cA.label.localeCompare(cB.label)),
       {
         value: "new",
         label: t("caseDialog.newCaseOption"),