Merge pull request #10705 from DestinyItemManager/organizer-toolbar

Improve organizer toolbar sizing
DestinyItemManager · Aug 31, 2024 · efa60f3 · efa60f3
2 parents d00d140 + e063684
commit efa60f3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 39 deletions.
diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss
@@ -25,23 +25,20 @@ $content-cells: 5;
 
 .toolbar {
   grid-column: 1 / -1;
-  position: sticky;
   z-index: $toolbar;
   box-sizing: border-box;
 
   top: var(--header-height);
   padding: 8px 8px !important;
-
   border-bottom: none !important;
-  > div {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    position: sticky;
-    left: calc(8px + env(safe-area-inset-left));
-    width: calc(98vw - env(safe-area-inset-left) - env(safe-area-inset-right));
-    gap: 4px;
-  }
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: sticky;
+  left: env(safe-area-inset-left);
+  width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
+  gap: 4px;
 }
 
 .importButton {

diff --git a/src/app/organizer/ItemTable.tsx b/src/app/organizer/ItemTable.tsx
@@ -451,35 +451,33 @@ export default function ItemTable({ categories }: { categories: ItemCategoryTree
         {confirmDialog}
         {bulkNoteDialog}
         <div className={styles.toolbar} ref={toolbarRef}>
-          <div>
-            <ItemActions
-              itemsAreSelected={Boolean(selectedItems.length)}
-              onLock={onLock}
-              onNote={onNote}
-              stores={stores}
-              onTagSelectedItems={onTagSelectedItems}
-              onMoveSelectedItems={onMoveSelectedItems}
-              onCompareSelectedItems={onCompareSelectedItems}
-            />
-            <UserGuideLink topic="Organizer" />
-            <Dropzone onDrop={importCsv} accept={{ 'text/csv': ['.csv'] }} useFsAccessApi={false}>
-              {({ getRootProps, getInputProps }) => (
-                <div {...getRootProps()} className={styles.importButton}>
-                  <input {...getInputProps()} />
-                  <div className="dim-button">
-                    <AppIcon icon={uploadIcon} /> {t('Settings.CsvImport')}
-                  </div>
+          <ItemActions
+            itemsAreSelected={Boolean(selectedItems.length)}
+            onLock={onLock}
+            onNote={onNote}
+            stores={stores}
+            onTagSelectedItems={onTagSelectedItems}
+            onMoveSelectedItems={onMoveSelectedItems}
+            onCompareSelectedItems={onCompareSelectedItems}
+          />
+          <UserGuideLink topic="Organizer" />
+          <Dropzone onDrop={importCsv} accept={{ 'text/csv': ['.csv'] }} useFsAccessApi={false}>
+            {({ getRootProps, getInputProps }) => (
+              <div {...getRootProps()} className={styles.importButton}>
+                <input {...getInputProps()} />
+                <div className="dim-button">
+                  <AppIcon icon={uploadIcon} /> {t('Settings.CsvImport')}
                 </div>
-              )}
-            </Dropzone>
-            {downloadAction}
-            <EnabledColumnsSelector
-              columns={columns}
-              enabledColumns={enabledColumns}
-              onChangeEnabledColumn={onChangeEnabledColumn}
-              forClass={classIfAny}
-            />
-          </div>
+              </div>
+            )}
+          </Dropzone>
+          {downloadAction}
+          <EnabledColumnsSelector
+            columns={columns}
+            enabledColumns={enabledColumns}
+            onChangeEnabledColumn={onChangeEnabledColumn}
+            forClass={classIfAny}
+          />
           {createPortal(<style>{rowStyle}</style>, document.head)}
         </div>
         <div className={clsx(styles.selection, styles.header)} role="columnheader" aria-sort="none">