Prioritize workspace on mobile
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
+3
-1
@@ -156,12 +156,14 @@
|
|||||||
.picture-candidate img { @apply h-16 w-[72px] object-contain; }
|
.picture-candidate img { @apply h-16 w-[72px] object-contain; }
|
||||||
.picture-candidate span { @apply min-w-0 truncate; }
|
.picture-candidate span { @apply min-w-0 truncate; }
|
||||||
@media (max-width: 980px) {
|
@media (max-width: 980px) {
|
||||||
.catalog-screen { @apply block pl-0; }
|
.catalog-screen { @apply flex flex-col pl-0; }
|
||||||
.sidebar-drawer { @apply w-[min(18rem,calc(100vw-1rem))] min-h-0; }
|
.sidebar-drawer { @apply w-[min(18rem,calc(100vw-1rem))] min-h-0; }
|
||||||
.sidebar-drawer:not([aria-hidden="true"]) { @apply max-h-screen; }
|
.sidebar-drawer:not([aria-hidden="true"]) { @apply max-h-screen; }
|
||||||
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
|
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
|
||||||
.sidebar-open-button { @apply left-2 top-2; }
|
.sidebar-open-button { @apply left-2 top-2; }
|
||||||
.secondary-panel { @apply border-r-0 pt-0; }
|
.secondary-panel { @apply border-r-0 pt-0; }
|
||||||
|
.main-workspace { @apply order-1; }
|
||||||
|
.secondary-panel { @apply order-2; }
|
||||||
.table-wrap { @apply max-h-[70vh]; }
|
.table-wrap { @apply max-h-[70vh]; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -32,6 +32,8 @@ test("catalog maker remains usable on a narrow viewport", async ({ page }) => {
|
|||||||
await expect(page.locator("#findSourcesButton")).toBeVisible();
|
await expect(page.locator("#findSourcesButton")).toBeVisible();
|
||||||
await expect(page.locator("#settingsButton")).toBeVisible();
|
await expect(page.locator("#settingsButton")).toBeVisible();
|
||||||
await expect(page.locator("#sidebarOverlay")).toBeVisible();
|
await expect(page.locator("#sidebarOverlay")).toBeVisible();
|
||||||
|
await expect(page.locator(".main-workspace")).toHaveCSS("order", "1");
|
||||||
|
await expect(page.locator(".secondary-panel")).toHaveCSS("order", "2");
|
||||||
await page.screenshot({ path: "test-results/catalog-maker-mobile.png", fullPage: true });
|
await page.screenshot({ path: "test-results/catalog-maker-mobile.png", fullPage: true });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user