fix(dashboard-v2): allow passing additional classnames to Panels + ensure all slides are equal height

packages/dashboard-v2/src/components/Panel/Panel.js

@@ -14,8 +14,8 @@ const PanelTitle = styled.h6.attrs({
  *
  * These additional props will be rendered onto the panel's body element.
  */
-export const Panel = ({ title, ...props }) => (
-  <div>
+export const Panel = ({ title, wrapperClassName, ...props }) => (
+  <div className={wrapperClassName}>
     {title && <PanelTitle>{title}</PanelTitle>}
     <PanelBody {...props} />
   </div>
@@ -26,8 +26,13 @@ Panel.propTypes = {
    * Label of the panel
    */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * CSS class to be applied to the external container
+   */
+  wrapperClassName: PropTypes.string,
 };
 
 Panel.defaultProps = {
   title: "",
+  wrapperClassName: "",
 };

packages/dashboard-v2/src/components/Slider/Slide.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 
 const Slide = styled.div.attrs(({ isVisible }) => ({
-  className: `slider-slide transition-opacity ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
+  className: `slider-slide transition-opacity h-full ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
 }))``;
 
 Slide.propTypes = {

packages/dashboard-v2/src/components/Slider/Slider.js

@@ -62,7 +62,7 @@ const Slider = ({ slides, breakpoints, scrollerClassName, className }) => {
           const isVisible = index >= activeIndex && index < activeIndex + visibleSlides;
 
           return (
-            <div key={`slide-${index}`}>
+            <div key={`slide-${index}`} className="h-full">
               <Slide
                 isVisible={isVisible || !scrollable}
                 onClickCapture={