diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
index 51a5090d1d..84c76fd065 100644
--- a/frontend/src/app/App.scss
+++ b/frontend/src/app/App.scss
@@ -9,7 +9,7 @@
.app-content {
display: grid;
- row-gap: 0.5rem;
+ row-gap: 1rem;
padding: $app-padding;
grid-auto-rows: min-content auto;
width: $app-width;
diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx
index 513cbe6e0f..1d828d7726 100644
--- a/frontend/src/features/gallery/ImageGallery.tsx
+++ b/frontend/src/features/gallery/ImageGallery.tsx
@@ -4,7 +4,7 @@ import { NumberSize, Resizable, Size } from 're-resizable';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { MdClear, MdPhotoLibrary } from 'react-icons/md';
-import { BsPinAngleFill } from 'react-icons/bs';
+import { BsPin, BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { requestImages } from '../../app/socketio/actions';
import { useAppDispatch, useAppSelector } from '../../app/store';
import IAIIconButton from '../../common/components/IAIIconButton';
@@ -441,11 +441,11 @@ export default function ImageGallery() {
}
- data-selected={shouldPinGallery}
+ icon={shouldPinGallery ? : }
/>
diff --git a/frontend/src/features/system/SiteHeader.scss b/frontend/src/features/system/SiteHeader.scss
index 549f370265..f9b40912c0 100644
--- a/frontend/src/features/system/SiteHeader.scss
+++ b/frontend/src/features/system/SiteHeader.scss
@@ -24,11 +24,3 @@
align-items: center;
column-gap: 0.5rem;
}
-
-// Overrides
-
-.process-buttons {
- padding-left: 0.5rem;
- button {
- }
-}
diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.scss b/frontend/src/features/tabs/InvokeOptionsPanel.scss
index b43e0895e1..2ac3ceb57b 100644
--- a/frontend/src/features/tabs/InvokeOptionsPanel.scss
+++ b/frontend/src/features/tabs/InvokeOptionsPanel.scss
@@ -19,16 +19,17 @@
}
.options-panel-wrapper {
- z-index: 20;
background-color: var(--background-color);
grid-auto-rows: max-content;
height: $app-content-height;
width: $options-bar-max-width;
max-width: $options-bar-max-width;
flex-shrink: 0;
+ position: relative;
.options-panel {
- display: grid;
+ display: flex;
+ flex-direction: column;
row-gap: 1rem;
height: 100%;
overflow-y: scroll;
@@ -36,6 +37,8 @@
}
&[data-pinned='false'] {
+ z-index: 20;
+
position: fixed;
top: 0;
left: 0;
@@ -48,4 +51,21 @@
padding: 1rem;
}
}
+
+ .options-panel-pin-button {
+ position: absolute;
+ cursor: pointer;
+ padding: 0.5rem;
+ top: 1rem;
+ right: 1rem;
+ z-index: 25;
+
+ &[data-selected='true'] {
+ top: 0;
+ right: 0;
+ }
+ svg {
+ opacity: 0.5;
+ }
+ }
}
diff --git a/frontend/src/features/tabs/InvokeTabs.scss b/frontend/src/features/tabs/InvokeTabs.scss
index f50a292ffc..d4d27e6d30 100644
--- a/frontend/src/features/tabs/InvokeTabs.scss
+++ b/frontend/src/features/tabs/InvokeTabs.scss
@@ -3,7 +3,7 @@
.app-tabs {
display: grid !important;
grid-template-columns: min-content auto;
- column-gap: 0.5rem;
+ column-gap: 1rem;
// height: 100%;
}
diff --git a/frontend/src/styles/Mixins/_Variables.scss b/frontend/src/styles/Mixins/_Variables.scss
index 865966386c..58e0f9e417 100644
--- a/frontend/src/styles/Mixins/_Variables.scss
+++ b/frontend/src/styles/Mixins/_Variables.scss
@@ -4,7 +4,7 @@ $app-content-height-cutoff: 4rem; // default: 7rem
// Usage Variables
// app
-$app-padding: 0.5rem;
+$app-padding: 1rem;
$progress-bar-thickness: 0.3rem;
$app-width: calc(100vw - $app-cutoff);
$app-height: calc(100vh - $progress-bar-thickness);