@crystallize/design-system 1.24.32 → 1.24.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.css +5 -0
  3. package/dist/{rich-text-editor-KXLB6GMR.css → rich-text-editor-TNAEFB7D.css} +5 -0
  4. package/package.json +1 -1
  5. package/src/dropdown-menu/dropdown-menu.css +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @crystallize/design-system
2
2
 
3
+ ## 1.24.33
4
+
5
+ ### Patch Changes
6
+
7
+ - beb4f2a: It was found that when the dropdown content is too long it overflows the screen. To fix it now we use the available hight from radix as max-height and overflow auto
8
+
3
9
  ## 1.24.32
4
10
 
5
11
  ### Patch Changes
package/dist/index.css CHANGED
@@ -777,12 +777,17 @@
777
777
  .c-dropdown-menu-content {
778
778
  animation-duration: 0.4s;
779
779
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
780
+ max-height: var(--radix-dropdown-menu-content-available-height);
781
+ scrollbar-width: thin;
780
782
  z-index: 100;
783
+ overflow: auto;
781
784
  border-radius: 0.25rem;
782
785
  border-width: 1px;
783
786
  border-style: solid;
784
787
  --tw-border-opacity: 1;
785
788
  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
789
+ --tw-bg-opacity: 1;
790
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
786
791
  --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
787
792
  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
788
793
  box-shadow:
package/dist/{rich-text-editor-KXLB6GMR.css → rich-text-editor-TNAEFB7D.css} RENAMED
@@ -1412,12 +1412,17 @@
1412
1412
  .c-dropdown-menu-content {
1413
1413
  animation-duration: 0.4s;
1414
1414
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
1415
+ max-height: var(--radix-dropdown-menu-content-available-height);
1416
+ scrollbar-width: thin;
1415
1417
  z-index: 100;
1418
+ overflow: auto;
1416
1419
  border-radius: 0.25rem;
1417
1420
  border-width: 1px;
1418
1421
  border-style: solid;
1419
1422
  --tw-border-opacity: 1;
1420
1423
  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
1424
+ --tw-bg-opacity: 1;
1425
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1421
1426
  --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1422
1427
  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1423
1428
  box-shadow:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystallize/design-system",
3
- "version": "1.24.32",
3
+ "version": "1.24.33",
4
4
  "types": "./dist/index.d.ts",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/dropdown-menu/dropdown-menu.css CHANGED
@@ -1,7 +1,9 @@
1
1
  .c-dropdown-menu-content {
2
2
  animation-duration: 0.4s;
3
3
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
4
- @apply z-[100] rounded border border-solid border-purple-200-700 shadow;
4
+ max-height: var(--radix-dropdown-menu-content-available-height);
5
+ scrollbar-width: thin;
6
+ @apply z-[100] overflow-auto rounded border border-solid border-purple-200-700 bg-white shadow;
5
7
  }
6
8
 
7
9
  .c-dropdown-menu-content[data-side='top'] {