Merge branch 'dev'

Mocca101 · Mar 8, 2023 · f5d41c9 · f5d41c9
2 parents 71b87d9 + 43316bc
commit f5d41c9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/Components/Modals/GroupSettingsMenu.ts b/src/Components/Modals/GroupSettingsMenu.ts
@@ -18,7 +18,7 @@ export default class GroupSettingsMenu extends HtmlComponent<GroupSettingMenuOpt
 			return;
 		}
 
-		new GroupSettings(this.mainEl, {});
+		new GroupSettings(this.mainEl, { maxListHeight: 340 });
 
 		this.updatePosition();
 	}
@@ -31,7 +31,7 @@ export default class GroupSettingsMenu extends HtmlComponent<GroupSettingMenuOpt
 		this.mainEl.style.transform = 'translate(0px, 0px)';
 
 		let xOffset = -this.mainEl.getBoundingClientRect().width / 2;
-		const yOffset = -this.mainEl.innerHeight / 2 - 48;
+		const yOffset = -this.mainEl.clientHeight / 2 - 30;
 
 		const diff =
 			window.innerWidth - this.mainEl.getBoundingClientRect().right - 16;

diff --git a/src/Components/Settings/GroupSettings.ts b/src/Components/Settings/GroupSettings.ts
@@ -8,6 +8,7 @@ import GroupEditModal from '../Modals/GroupEditModal';
 export interface GroupSettingOptions {
 	collapsible?: boolean;
 	startOpened?: boolean;
+	maxListHeight?: number;
 }
 
 export default class GroupSettings extends HtmlComponent<GroupSettingOptions> {
@@ -61,7 +62,12 @@ export default class GroupSettings extends HtmlComponent<GroupSettingOptions> {
 				addBtnEl.addClass('btn-disabled');
 			});
 
-		this.GenerateGroupList(content);
+		const listContainer = content.createDiv();
+		listContainer.style.overflow = 'scroll';
+		listContainer.style.maxHeight =
+			(this.options.maxListHeight?.toString() ?? '') + 'px';
+
+		this.GenerateGroupList(listContainer);
 	}
 
 	protected generateContainer(): void {

diff --git a/styles.css b/styles.css
@@ -205,20 +205,22 @@
 
 	transition: height 1s, opacity 250ms;
 
-	overflow: hidden;
-	position: absolute;
+	overflow: scroll;
+	position: fixed;
 	background-color: var(--modal-background);
 }
 
 .pg-statusbar-icon:focus-within > .pg-settings-window {
 	height: auto;
+	max-height: 500px;
+	min-height: 100px;
 	opacity: 1;
 
 	transition: height 1s, opacity 250ms;
 
 	border-radius: var(--modal-radius);
 	border: var(--modal-border-width) solid var(--modal-border-color);
-	padding: var(--size-4-4);
+	padding: 0 0 0 16px;
 }
 
 .pg-collapsible-content.is-active {