Made file panel not overflow small viewports (#2047)

Author: matthewlipski

packages/ariakit/src/style.css

@@ -42,6 +42,10 @@
   gap: 0.5rem;
 }
 
+.bn-ariakit .bn-panel {
+  max-width: 100vw;
+}
+
 .bn-ariakit .bn-tab-panel {
   align-items: center;
   display: flex;

packages/mantine/src/blocknoteStyles.css

@@ -507,6 +507,7 @@
   box-shadow: var(--bn-shadow-medium);
   padding: 2px;
   width: 500px;
+  max-width: 100vw;
 }
 
 .bn-mantine .bn-panel .bn-tab-panel {

packages/shadcn/src/panel/Panel.tsx

@@ -25,7 +25,7 @@ export const Panel = forwardRef<
 
   return (
     <ShadCNComponents.Tabs.Tabs
-      className={cn(className, "bg-popover rounded-lg p-2")}
+      className={cn(className, "bg-popover max-w-screen rounded-lg p-2")}
       ref={ref}
       value={openTab}
       defaultValue={defaultOpenTab}

packages/shadcn/src/panel/PanelTextInput.tsx

@@ -18,7 +18,7 @@ export const PanelTextInput = forwardRef<
   return (
     <ShadCNComponents.Input.Input
       data-test={"embed-input"}
-      className={cn(className, "w-80")}
+      className={cn(className, "w-80 max-w-full")}
       ref={ref}
       value={value}
       placeholder={placeholder}