Merge remote-tracking branch 'origin/main' into ad/upgrade-forge

adidahiya · Nov 20, 2023 · 505e5c6 · 505e5c6
2 parents f115a9a + 94d2188
commit 505e5c6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/packages/music-library-app/src/common/_global-modifiers.scss b/packages/music-library-app/src/common/_global-modifiers.scss
@@ -0,0 +1,9 @@
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
diff --git a/packages/music-library-app/src/index.scss b/packages/music-library-app/src/index.scss
@@ -1,4 +1,5 @@
 @import "./common/blueprint-overrides";
+@import "./common/global-modifiers";
 
 body {
     height: 100%;

diff --git a/packages/music-library-app/src/ui/libraryView.module.scss b/packages/music-library-app/src/ui/libraryView.module.scss
@@ -12,13 +12,22 @@
     }
 }
 
-.libraryHeader {
-    padding: bp.$pt-grid-size * 2;
+.libraryLoaded {
+    height: 100%;
+    position: relative;
 }
 
-.libraryLoaded {
-    .loadLibraryButton {
-        float: right;
-        margin: $double-grid-size;
-    }
+.loadLibraryButton {
+    position: absolute;
+    right: $double-grid-size;
+    top: $double-grid-size;
+}
+
+.library {
+    width: 100%;
+    height: 100%;
+}
+
+.libraryHeader {
+    padding: bp.$pt-grid-size * 2;
 }
diff --git a/packages/music-library-app/src/ui/libraryView.tsx b/packages/music-library-app/src/ui/libraryView.tsx
@@ -16,6 +16,7 @@ import ResizeHandle from "./resizeHandle";
 import { appStore } from "./store/appStore";
 
 import styles from "./libraryView.module.scss";
+import classNames from "classnames";
 
 declare global {
     interface Window {
@@ -102,7 +103,7 @@ function Library(props: LibraryProps) {
     const masterPlaylist = getMasterPlaylist(props.library);
 
     return (
-        <div>
+        <div className={classNames("flex-column", styles.library)}>
             <div className={styles.libraryHeader} ref={headerRef}>
                 <H5>Stats</H5>
                 <p>Date created: {format(props.library.Date, "Pp")}</p>