Improved Archive page

styles/Archive.module.scss

@@ -7,11 +7,40 @@
   margin-bottom: 1em;
 }
 
+.yearTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  width: 100%;
+  margin-bottom: 1em;
+
+  h2 {
+    flex: 1;
+    min-width: 0;
+  }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+.yearPerformers {
+  width: 100%;
+  overflow: hidden;
+}
+
+.yearPerformersContent {
+  width: 100%;
+}
+
 .performerContainer {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  width: 90%;
+  width: 100%;
+  box-sizing: border-box;
 
   p {
     padding-left: 1rem;
@@ -22,14 +51,14 @@
     width: 100%;
     margin-top: 2rem;
     margin-bottom: 2rem;
-    width: 100%;
   }
 }
 
 .performerTextContainer {
-  width: 80%;
+  flex: 1;
   margin-left: 1rem;
   margin-top: 1rem;
+  min-width: 0;
 }
 
 .performerTitle {
@@ -41,7 +70,8 @@
 
   h2 {
     margin-left: 1rem;
-    width: 100%;
+    flex: 1;
+    min-width: 0;
   }
 
   h2:hover {

styles/transitions.scss

@@ -15,3 +15,36 @@
   opacity: 0;
   transition: opacity 1000ms;
 }
+
+// Height transition for Archive page
+.heightTransition-enter {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.heightTransition-enter-active {
+  max-height: 10000px;
+  overflow: hidden;
+  transition: max-height 300ms ease-out;
+}
+
+.heightTransition-enter-done {
+  max-height: 10000px;
+  overflow: hidden;
+}
+
+.heightTransition-exit {
+  max-height: 10000px;
+  overflow: hidden;
+}
+
+.heightTransition-exit-active {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 300ms ease-out;
+}
+
+.heightTransition-exit-done {
+  max-height: 0;
+  overflow: hidden;
+}