giovanicascaes

{
	"vs/base/common/collections": {
		"map": "a"
	},
	"vs/base/common/lazy": {
		"_value": "b",
		"_error": "c",
		"_didRun": "a",
		"executor": "d"
	},

giovanicascaes

.SM > .panel {
  display: flex;
  flex-wrap: wrap;
}

.MD > .panel {
  display: block;
}

giovanicascaes

.SM > .panel .item-container {
  flex-direction: column;
  align-items: center;
}

.MD > .panel .item-container {
  flex-direction: row;
  align-items: flex-start;
  border-bottom-width: 1px;
}

giovanicascaes

export default const ResponsiveContainerExample = () => {
  return (
    <ResponsiveContainer
      className="overflow-y-auto"
      breakpoints={{ SM: 0, MD: 430 }}
    >
      <div className="panel">
        ...
      </div>
    </ResponsiveContainer>

giovanicascaes

import React, { useRef, useEffect } from "react";

// Checks if API is supported; otherwise imports pollyfill
const ResizeObserver =
  window.ResizeObserver || require("resize-observer-polyfill");

// Defines observer behaviour to react to changes upon container dimensions
const observer = new ResizeObserver(function (entries) {
  // Default breakpoints. This object's keys will be mapped to CSS classnames used to
  // dinamically style the elements inside container