first pass at a mobile view

package.json

@@ -23,7 +23,7 @@
     "lint-fix": "eslint --fix",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "prepublishOnly": "npm run build && npm run lint",
+    "prepublishOnly": "npm run build && npm run lint && npm run test",
     "preversion": "npm run typecheck && npm run lint",
     "postpublish": "git push origin staging",
     "start": "vite"

src/components/folder-pane-container/FolderPaneContainer.styles.css

@@ -12,8 +12,10 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    height: 100%;
     min-height: 0;
     width: 100%;
+    box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
@@ -65,10 +67,10 @@
 
   .resource-grid {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     flex: 1 1 auto;
     align-content: flex-start;
-    align-items: flex-start;
     gap: 20px;
     width: 100%;
     min-height: 0;
@@ -83,9 +85,10 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    flex: 0 0 auto;
-    width: 206px;
-    max-width: 100%;
+    flex: 1 1 206px;
+    width: min(206px, 100%);
+    min-width: 0;
+    max-width: 206px;
     height: 145.824px;
     border-radius: 5px;
     border: 1px solid var(--solid-ui-color-gray-200, #cbd5e1);
@@ -124,6 +127,8 @@
   .resource-grid-icon icon-lucide-file {
     width: 64px;
     height: 64px;
+    color: var(--solid-ui-color-gray-500, #6a7282);
+    stroke: var(--solid-ui-color-gray-500, #6a7282);
   }
 
   .resource-grid-icon--container {
@@ -197,6 +202,23 @@
     outline-offset: -2px;
   }
 
+  @media (max-width: 768px) {
+    .resource-grid {
+      gap: 15px;
+    }
+
+    .resource-grid,
+    .resource-list {
+      padding: 0;
+    }
+
+    .resource-grid-item {
+      flex: 0 0 calc((100% - 15px) / 2);
+      width: calc((100% - 15px) / 2);
+      max-width: none;
+    }
+  }
+
   .resource-list-main {
     display: flex;
     align-items: center;

src/components/folder-pane-container/FolderPaneContainer.ts

@@ -110,7 +110,7 @@ export default class FolderPaneContainer extends WebComponent {
   private isRootSpecialFolder (resource: Resource) {
     if (!resource.isContainer) return false
     const label = utils.label(resource.subject).toLowerCase()
-    return label === 'public' || label === 'trash'
+    return label === 'public'
   }
 
   private getResourcesFromStore () {

src/components/folder-pane-content/FolderPaneContent.styles.css

@@ -1,7 +1,14 @@
 :host {
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
   flex: 1 1 0%;
+  padding: 10px 16px;
+  align-items: stretch;
+  gap: 20px;
+  flex-shrink: 0;
+  align-self: stretch;
+  height: 100%;
   width: 100%;
   min-width: 0;
   min-height: 0;

src/components/folder-pane-sidebar/FolderPaneSidebar.styles.css

@@ -122,8 +122,7 @@
   }
 
   .resource-row-special icon-lucide-folder,
-  .resource-row-special icon-lucide-globe,
-  .resource-row-special icon-lucide-trash-2 {
+  .resource-row-special icon-lucide-globe {
     width: 16px;
     height: 16px;
     flex-shrink: 0;

src/components/folder-pane-sidebar/FolderPaneSidebar.ts

@@ -10,11 +10,10 @@ import '~icons/lucide/chevron-right'
 import '~icons/lucide/circle-small'
 import '~icons/lucide/folder'
 import '~icons/lucide/globe'
-import '~icons/lucide/trash-2'
 import { getResourcesForContainer, type FolderPaneResourceLogic } from '../../helpers'
 import * as debug from '../../debug'
 
-type SpecialIcon = 'folder' | 'globe' | 'trash'
+type SpecialIcon = 'folder' | 'globe'
 
 @customElement('folder-pane-sidebar')
 export default class FolderPaneSidebar extends WebComponent {
@@ -203,7 +202,6 @@ export default class FolderPaneSidebar extends WebComponent {
 
   private renderSpecialIcon (icon: SpecialIcon) {
     if (icon === 'globe') return html`<icon-lucide-globe></icon-lucide-globe>`
-    if (icon === 'trash') return html`<icon-lucide-trash-2></icon-lucide-trash-2>`
     return html`<icon-lucide-folder></icon-lucide-folder>`
   }
 
@@ -247,7 +245,6 @@ export default class FolderPaneSidebar extends WebComponent {
       return index >= 0 ? orderedResources.splice(index, 1)[0] : null
     }
     const publicResource = takeNamed('public')
-    const trashResource = takeNamed('trash')
 
     return html`
       <ul role="tree" class="resource-tree" aria-label="Storage resources">
@@ -261,7 +258,6 @@ export default class FolderPaneSidebar extends WebComponent {
           true
         )}
         ${publicResource ? this.renderResourceItem(publicResource, 'Public', 'globe') : nothing}
-        ${trashResource ? this.renderResourceItem(trashResource, 'Trash', 'trash') : nothing}
       </ul>
     `
   }