Improved slide transition.

packages/client/src/components/dashboard/controls/AnimatedCollapse.css

@@ -9,6 +9,10 @@
   max-height: 0;
 }
 
+.animated-collapse-content {
+  overflow: visible;
+}
+
 .animated-collapse.visible {
   opacity: 1;
   transform: translateY(0);

packages/client/src/components/dashboard/controls/AnimatedCollapse.jsx

@@ -80,7 +80,9 @@ function AnimatedCollapse({ visible, children }) {
         maxHeight: visible && maxHeight > 0 ? `${maxHeight}px` : "0",
       }}
     >
-      <div ref={contentRef}>{children}</div>
+      <div ref={contentRef} className="animated-collapse-content">
+        {children}
+      </div>
     </div>
   );
 }

packages/client/src/components/dashboard/controls/SlideView.css

@@ -3,7 +3,8 @@
 }
 
 .slide-view-container {
-  width: 100%;
+  margin-left: -7vw;
+  margin-right: -7vw;
   display: flex;
   overflow-x: visible;
   overflow-y: hidden;
@@ -52,6 +53,8 @@
 }
 
 .slide-view-item {
+  padding-left: 7vw;
+  padding-right: 7vw;
   min-width: 100%;
   width: 100%;
   flex-shrink: 0;