From 0bb2768754d11b865d68e72dcd7cebb232a6308a Mon Sep 17 00:00:00 2001
From: Puneet Dixit <puneetdixit4321@gmail.com>
Date: Thu, 4 Jun 2026 16:19:30 +0530
Subject: [PATCH] fix: keep mobile file sort controls visible (#5977)

---
 frontend/src/css/__tests__/mobile.test.ts | 22 ++++++++++++++
 frontend/src/css/mobile.css               | 35 ++++++++++++++++++++---
 2 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/css/__tests__/mobile.test.ts

diff --git a/frontend/src/css/__tests__/mobile.test.ts b/frontend/src/css/__tests__/mobile.test.ts
new file mode 100644
index 00000000..8b492c55
--- /dev/null
+++ b/frontend/src/css/__tests__/mobile.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const mobileCss = readFileSync(resolve(__dirname, "../mobile.css"), "utf8");
+
+const normalizedCss = mobileCss.replace(/\s+/g, " ");
+
+describe("mobile file listing styles", () => {
+  it("hides file row metadata without hiding list header sort controls", () => {
+    expect(normalizedCss).toContain(
+      "#listing.list .item:not(.header) .size { display: none;"
+    );
+    expect(normalizedCss).toContain(
+      "#listing.list .item:not(.header) .modified { display: none;"
+    );
+
+    expect(normalizedCss).not.toMatch(
+      /#listing\.list \.item \.(size|modified) \{ display: none;/
+    );
+  });
+});
diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css
index f8b2a45b..baace203 100644
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@@ -14,12 +14,27 @@
   body {
     padding-bottom: 5em;
   }
-  #listing.list .item .size {
+  #listing.list .item:not(.header) .size {
     display: none;
   }
-  #listing.list .item .name {
+  #listing.list .item:not(.header) .name {
     width: 60%;
   }
+  #listing.list .item.header .name {
+    margin-right: 0;
+    width: 45%;
+  }
+  #listing.list .item.header .size {
+    width: 25%;
+  }
+  #listing.list .item.header .modified {
+    width: 30%;
+  }
+  #listing.list .item.header p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   #more {
     display: inherit;
   }
@@ -162,10 +177,22 @@
 }
 
 @media (max-width: 450px) {
-  #listing.list .item .modified {
+  #listing.list .item:not(.header) .modified {
     display: none;
   }
-  #listing.list .item .name {
+  #listing.list .item:not(.header) .name {
     width: 100%;
   }
+  #listing.list .item.header {
+    padding: 0.75em 0.5em;
+  }
+  #listing.list .item.header .name {
+    width: 34%;
+  }
+  #listing.list .item.header .size {
+    width: 24%;
+  }
+  #listing.list .item.header .modified {
+    width: 42%;
+  }
 }