fix: max height/width for popover/tooltip

SIKKA-6388[closed]
sikka-software · Feb 3, 2024 · b87aee7 · b87aee7
1 parent 4dd0a7b
commit b87aee7
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 20 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.27.16
+
 ## 0.0.18
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.27.16
+
+### Patch Changes
+
+- Fixed `maxWidth` and `maxHeight` to not exceed the screen width & height for `Tooltip` and `Popover`
+
 ## 0.27.14
 
 ### Patch Changes

diff --git a/packages/components/elements/popover/Popover.tsx b/packages/components/elements/popover/Popover.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@util/index";
 
 import { PositionType } from "@_types/commonTypes";
 
-import { cn } from "@util/index";
-
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -76,7 +75,9 @@ const Popover: React.FC<HawaPopoverTypes> = ({
         align={align}
         sideOffset={sideOffset}
         style={{
-          width: widthStyles[width]
+          width: widthStyles[width],
+          maxWidth: "var(--radix-popover-content-available-width)",
+          maxHeight: "var(--radix-popover-content-available-height)"
         }}
         {...contentProps}
       >

diff --git a/packages/components/elements/tooltip/Tooltip.tsx b/packages/components/elements/tooltip/Tooltip.tsx
@@ -65,7 +65,7 @@ const Tooltip: React.FunctionComponent<TooltipTypes> = ({
   open,
   content,
   children,
-  disabled ,
+  disabled,
   defaultOpen,
   onOpenChange,
   triggerProps,
@@ -93,6 +93,11 @@ const Tooltip: React.FunctionComponent<TooltipTypes> = ({
           side={side}
           align="center"
           {...contentProps}
+          style={{
+            ...contentProps?.style,
+            maxWidth: "var(--radix-tooltip-content-available-width)",
+            maxHeight: "var(--radix-tooltip-content-available-height)"
+          }}
         >
           {content}
         </TooltipContent>

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.27.15",
+  "version": "0.27.16",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.36
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.27.16
+
 ## 0.26.35
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.35",
+  "version": "0.26.36",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/stories/BlocksStories/AuthStories/Register.stories.tsx b/packages/storybook/stories/BlocksStories/AuthStories/Register.stories.tsx
@@ -6,23 +6,10 @@ import { Button } from "@sikka/hawa/elements/button";
 import { Input } from "@sikka/hawa/elements/input";
 
 import { setLocale, t } from "../../../translations/i18n";
-import RegisterDocs from "./Register";
 
 const meta = {
   title: "Blocks/User Auth/Register Form",
   component: RegisterForm
-  // parameters: {
-  //   controls: { exclude: ["direction"] },
-  //   docs: {
-  //     page: () => <RegisterDocs />,
-  //     toc: {
-  //       title: "Register Form",
-  //       headingSelector: "h2,h3",
-  //       ignoreSelector: "div"
-  //     }
-  //   }
-  // },
-  // tags: ["autodocs"]
 } satisfies Meta<typeof RegisterForm>;
 
 export default meta;