diff --git a/app/src/components/FileBrowser.js b/app/src/components/FileBrowser.js
index a35158f6..494e1b1e 100644
--- a/app/src/components/FileBrowser.js
+++ b/app/src/components/FileBrowser.js
@@ -27,7 +27,7 @@ import {useDropzone} from "react-dropzone";
import {deleteFile, ignoreDirectory, makeDirectory, movePaths, renamePath, unignoreDirectory} from "../api";
import _ from 'lodash';
import {SortableTable} from "./SortableTable";
-import {useBrowseFiles, useMediaDirectory, useUploadFile, useWROLMode} from "../hooks/customHooks";
+import {useBrowseFiles, useElementWidth, useMediaDirectory, useUploadFile, useWROLMode} from "../hooks/customHooks";
import {FileRowTagIcon, FilesRefreshButton} from "./Files";
import {FilePreviewContext} from "./FilePreview";
import {DragSelectionContext, DragSelectionProvider, SettingsContext, ThemeContext} from "../contexts/contexts";
@@ -196,6 +196,10 @@ function SkeletonFileRow({depth}) {
);
}
+// Below this footer width (px) the action buttons are icon-only; at or above it they expand to show labels.
+// The eight labeled buttons need ~1020px to fit on a single row; this leaves a small buffer.
+const FOOTER_LABELS_MIN_WIDTH = 1050;
+
export function FileBrowser() {
const [selectedPaths, setSelectedPaths] = React.useState([]);
const [renameOpen, setRenameOpen] = React.useState(false);
@@ -342,9 +346,15 @@ export function FileBrowser() {
}
}
+ const [footerRef, footerWidth] = useElementWidth();
+ // Expand icon-only buttons to include labels once the footer is wide enough to fit them.
+ const showLabels = footerWidth >= FOOTER_LABELS_MIN_WIDTH;
+ // Semantic UI renders a labeled icon button when `content` and `labelPosition` are set, else icon-only.
+ const labelProps = (content) => showLabels ? {content, labelPosition: 'left'} : {};
+
const footerClassName = `sticky-footer ${inverted}`;
- const footer =