From 94d218894faf32a1ef07ad1977b8e3a0fc25cc1f Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adi.dahiya14@gmail.com>
Date: Mon, 20 Nov 2023 18:42:21 -0500
Subject: [PATCH] feat: library view flex styling

---
 .../src/common/_global-modifiers.scss         |  9 ++++++++
 packages/music-library-app/src/index.scss     |  1 +
 .../src/ui/libraryView.module.scss            | 23 +++++++++++++------
 .../music-library-app/src/ui/libraryView.tsx  |  3 ++-
 4 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 packages/music-library-app/src/common/_global-modifiers.scss

diff --git a/packages/music-library-app/src/common/_global-modifiers.scss b/packages/music-library-app/src/common/_global-modifiers.scss
new file mode 100644
index 00000000..dbeaaca9
--- /dev/null
+++ 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
index 2b3334af..08efe5ef 100644
--- 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
index 67c6dbe6..22f53d76 100644
--- 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
index 82a5e3fe..0295eac6 100644
--- 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>