From 7be8a3c72c500c4f4dbc6c9da031d13c1e88c226 Mon Sep 17 00:00:00 2001
From: Caleb Jacob <thecalebjacob@gmail.com>
Date: Wed, 13 Nov 2024 09:32:32 -0700
Subject: [PATCH] Update breakpoint display to support style and flex shrink 0

---
 package.json                                 | 2 +-
 src/components/BreakpointDisplay.module.scss | 2 ++
 src/components/BreakpointDisplay.tsx         | 7 ++++---
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e20bb51..252e185 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {
diff --git a/src/components/BreakpointDisplay.module.scss b/src/components/BreakpointDisplay.module.scss
index b72b42c..04248de 100644
--- a/src/components/BreakpointDisplay.module.scss
+++ b/src/components/BreakpointDisplay.module.scss
@@ -1,6 +1,8 @@
 @import '../styles/variables';
 
 .breakpoint {
+  flex-shrink: 0;
+
   &[data-show='sidebar-small-screen'],
   &[data-show='smaller-than-desktop'] {
     @media (min-width: calc(#{$tabletBreakpointMaxWidth} + 1px)) {
diff --git a/src/components/BreakpointDisplay.tsx b/src/components/BreakpointDisplay.tsx
index e9ed65e..2b6cb2b 100644
--- a/src/components/BreakpointDisplay.tsx
+++ b/src/components/BreakpointDisplay.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { CSSProperties, type ReactNode } from 'react';
 
 import s from './BreakpointDisplay.module.scss';
 
@@ -11,11 +11,12 @@ type Props = {
     | 'smaller-than-tablet'
     | 'larger-than-phone'
     | 'larger-than-tablet';
+  style?: CSSProperties;
 };
 
-export const BreakpointDisplay = ({ children, className = '', show }: Props) => {
+export const BreakpointDisplay = ({ children, className = '', show, ...props }: Props) => {
   return (
-    <div className={`${s.breakpoint} ${className}`} data-show={show}>
+    <div className={`${s.breakpoint} ${className}`} data-show={show} {...props}>
       {children}
     </div>
   );