file browser polishing
3clyp50 committed
Jan 31, 2026 at 16:51 UTC
a01d3c75e525ab4791f68fdc61b5f299a66f460f
2 files changed
+18
-17
webui/components/modals/file-browser/file-browser.html
+18
-14
@@ -51,7 +51,7 @@
51
<template x-if="$store.fileBrowser.browser.entries.length">
52
<template x-for="file in $store.fileBrowser.sortFiles($store.fileBrowser.browser.entries)" :key="file.path">
53
<div class="file-item" :data-is-dir="file.is_dir">
54
- <div class="file-name" @click="file.is_dir ? $store.fileBrowser.navigateToFolder(file.path) : $store.fileBrowser.downloadFile(file)">
54
+ <div class="file-name" @click="file.is_dir && $store.fileBrowser.navigateToFolder(file.path)">
55
<img :src="'/public/' + (file.type === 'unknown' ? 'file' : ($store.fileBrowser.isArchive(file.name) ? 'archive' : file.type)) + '.svg'" class="file-icon" :alt="file.type" />
56
<span x-text="file.name"></span>
57
</div>
@@ -91,7 +91,7 @@
91
<button
92
type="button"
93
class="dropdown-item"
94
- x-show="!file.is_dir"
94
+ x-show="!file.is_dir && file.size <= 1048576"
95
@click="$store.fileBrowser.openFileEditor(file)"
96
>
97
<span class="material-symbols-outlined">file_open</span>
@@ -191,22 +191,24 @@
191
}
192
193
/* File Browser Styles */
194
- .files-list,
195
- .file-header {
194
+ .files-list {
195
width: 100%;
196
border-radius: 4px;
198
- overflow: hidden;
197
+ /* Removed overflow: hidden to allow dropdown menus to be visible */
198
}
199
200
/* Header Styles */
201
.file-header {
203
- display: grid;
204
- grid-template-columns: 2fr 0.6fr 1fr 160px;
205
- background: var(--secondary-bg);
206
- padding: 8px 0;
207
- font-weight: bold;
208
- border-bottom: 1px solid var(--border-color);
209
- color: var(--color-primary);
202
+ width: 100%;
203
+ border-radius: 4px;
204
+ overflow: hidden;
205
+ display: grid;
206
+ grid-template-columns: 1.5fr 0.71fr 1.05fr 0.6fr;
207
+ background: var(--secondary-bg);
208
+ padding: 8px 0;
209
+ font-weight: bold;
210
+ border-bottom: 1px solid var(--border-color);
211
+ color: var(--color-primary);
212
}
213
.file-cell,
214
.file-cell-size,
@@ -219,7 +221,7 @@
221
/* File Item Styles */
222
.file-item {
223
display: grid;
222
- grid-template-columns: 2fr 0.6fr 1fr 160px;
224
+ grid-template-columns: 1.5fr 0.7fr 1fr 0.6fr;
225
align-items: center;
226
padding: 8px 0;
227
font-size: 0.875rem;
@@ -381,7 +383,9 @@
383
}
384
/* Responsive Design */
385
@media (max-width: 768px) {
384
- .file-header,
386
+ .file-header {
387
+ grid-template-columns: 1fr 0.52fr 120px;
388
+ }
389
.file-item {
390
grid-template-columns: 1fr 0.5fr 120px;
391
}
webui/css/tables.css
-3
@@ -303,9 +303,6 @@
303
padding: 2rem;
304
color: var(--color-text);
305
opacity: 0.8;
306
- background: var(--color-panel);
307
- border: 1px solid var(--color-border);
308
- border-radius: 8px;
306
margin: 1rem 0;
307
display: grid;
308
align-items: center;