@vtex/faststore-plugin-buyer-portal 1.3.49 → 1.3.51

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.51] - 2026-01-05
+
+### Added
+
+- Add Settings Drawers for Credit Cards, Payment Methods and Collections
+  - Implement `CreditCardSettingsDrawer` component for credit cards scope configuration
+  - Implement `PaymentMethodSettingsDrawer` component for payment methods scope configuration
+  - Implement `CollectionsSettingsDrawer` component for product assortment scope configuration
+  - Integrate settings drawers with respective layout pages
+
+## [1.3.50] - 2025-12-19
+
+### Changed
+
+- Introduces several improvements and refactorings to the budget notification drawer, focusing on user experience.
+
 ## [1.3.49] - 2025-12-19
 
 ### Added
@@ -23,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Alternative Login Keys:
   - Add auth setup drawer
   - Update AddUserDrawer to support username
-  
+
 ## [1.3.46] - 2025-12-19
 
 ### Fixed
@@ -33,16 +49,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.3.45] - 2025-12-17
 
 ### Fixed
+
 - Remove AwaitedType imports
 
 ## [1.3.44] - 2025-12-16
 
 ### Fixed
+
 - Remove AwaitedType export that was breaking the application build
 
 ## [1.3.43] - 2025-12-16
 
 ### Fixed
+
 - Update maskPhoneNumber to include country DDI
 - Send only phone digits to API in Users and Recipients pages
 - Show masked phone in layout and forms in Users and Recipients pages
@@ -62,6 +81,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.40] - 2025-12-09
 
+### Fixed
+
 - Fix e2e auth flow
 
 ## [1.3.39] - 2025-12-09
@@ -79,7 +100,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.37] - 2025-12-04
 
-## Changed
+### Changed
 
 - Allow Credit Card CVV to accept 4 digits
 
@@ -97,12 +118,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.34] - 2025-12-01
 
+### Added
+
 - Add generic `SettingsDrawer` component with `ListType` subcomponent for scope configuration
 - Add Scope Config API integration (`useGetScopeConfig`, `useSetScopeConfig` hooks)
 - Integrate Settings Drawer with Address Settings page
-
-### Added
-
 - Add DK Docs
 
 ### Fixed
@@ -306,6 +326,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.3.4] - 2025-10-16
 
+### Fixed
+
 - Error boundary:
   - Updating the authentication loader to provide detailed error context.
 
@@ -417,21 +439,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.49...HEAD
-[1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
-[1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
-[1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
-[1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
-[1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
-[1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4
-[1.3.5]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.5
-[1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6
-[1.3.9]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...v1.3.9
-[1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
-[1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
-
-# <<<<<<< HEAD
-
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.51...HEAD
+[1.3.51]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.50...v1.3.51
+[1.3.50]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.49...v1.3.50
+[1.3.49]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.48...v1.3.49
+[1.3.48]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.47...v1.3.48
+[1.3.47]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...v1.3.47
+[1.3.46]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.45...v1.3.46
+[1.3.45]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.44...v1.3.45
+[1.3.44]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...v1.3.44
+[1.3.43]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.42...v1.3.43
+[1.3.42]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.42
+[1.3.41]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.40...v1.3.41
+[1.3.40]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.39...v1.3.40
+[1.3.39]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.38...v1.3.39
+[1.3.38]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.37...v1.3.38
+[1.3.37]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.36...v1.3.37
+[1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
+[1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
 [1.3.34]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.33...v1.3.34
 [1.3.33]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...v1.3.33
 [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
@@ -455,23 +480,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.14]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.13...v1.3.14
 [1.3.13]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.12...v1.3.13
 [1.3.12]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.11...v1.3.12
-
-> > > > > > > main
-> > > > > > > [1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
-
-[1.3.41]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.40...v1.3.41
-[1.3.40]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.39...v1.3.40
-[1.3.39]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.38...v1.3.39
-[1.3.38]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.37...v1.3.38
-[1.3.37]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.36...v1.3.37
-[1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
-[1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
-
-[1.3.49]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.48...v1.3.49
-[1.3.48]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.47...v1.3.48
-[1.3.47]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...v1.3.47
-[1.3.46]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.45...v1.3.46
-[1.3.45]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.44...v1.3.45
-[1.3.44]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...v1.3.44
-[1.3.43]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.42...v1.3.43
-[1.3.42]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.42
+[1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
+[1.3.9]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...v1.3.9
+[1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
+[1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
+[1.3.6]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.6
+[1.3.5]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.5
+[1.3.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.4
+[1.3.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.3
+[1.3.2]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.2
+[1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
+[1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.49",
+  "version": "1.3.51",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/addresses/components/CreateAddressSettingsDrawer/CreateAddressSettingsDrawer.tsx

@@ -7,10 +7,9 @@ import { useUI, Skeleton } from "@faststore/ui";
 import {
   type BasicDrawerProps,
   AutocompleteDropdown,
-  DEFAULT_LIST_TYPE_OPTIONS,
   Icon,
-  ListTypeOption,
   SettingsDrawer,
+  createListTypeOptions,
 } from "../../../shared/components";
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
@@ -31,17 +30,7 @@ export type CreateAddressSettingsDrawerProps = Omit<
   onUpdate?: () => void;
 };
 
-export const ADDRESS_LIST_TYPE_OPTIONS: ListTypeOption[] = [
-  {
-    ...DEFAULT_LIST_TYPE_OPTIONS[0],
-    description: "Manage a unique list of addresses for this organization.",
-  },
-  {
-    ...DEFAULT_LIST_TYPE_OPTIONS[1],
-    description:
-      "Use the shared list of addresses defined by the contract. Updates are automatic.",
-  },
-];
+export const ADDRESS_LIST_TYPE_OPTIONS = createListTypeOptions("addresses");
 
 export const CreateAddressSettingsDrawer = ({
   close,

package/src/features/budgets/components/BudgetEditNotificationDrawer/BudgetEditNotificationDrawer.tsx

@@ -104,6 +104,7 @@ export function BudgetEditNotificationDrawer({
     <BasicDrawer
       data-fs-bp-budget-notifications-drawer
       close={close}
+      size="large"
       {...props}
     >
       <BasicDrawer.Heading title="Edit notifications" onClose={close} />

package/src/features/budgets/components/BudgetNotificationForm/BudgetNotificationForm.tsx

@@ -7,6 +7,7 @@ import {
   QuantitySelectorWithPercentage,
   Table,
 } from "../../../shared/components";
+import { useBuyerPortal } from "../../../shared/hooks";
 import { CurrencyType, LocaleType } from "../../../shared/types";
 import { useDebouncedSearchBudgetNotification } from "../../hooks/useDebouncedSearchBudgetNotification";
 import BudgetUsersTable from "../BudgetUsersTable/BudgetUsersTable";
@@ -36,6 +37,8 @@ type BudgetNotificationFormProps = {
 
 type UserOption = { id: string; name: string; email?: string };
 
+const MAX_THRESHOLDS = 5;
+
 export const BudgetNotificationForm = ({
   budget,
   contractId,
@@ -47,6 +50,8 @@ export const BudgetNotificationForm = ({
   locale = "en-US",
   showUsersError = false,
 }: BudgetNotificationFormProps) => {
+  const { currentUser } = useBuyerPortal();
+
   const [enabled, setEnabled] = useState<boolean>(
     Boolean(budget?.notifications?.hasNotification)
   );
@@ -124,7 +129,7 @@ export const BudgetNotificationForm = ({
   const addThreshold = () => {
     if (readonly || parsedTotal <= 0) return;
     setThresholds((prev) =>
-      prev.length >= 5 ? prev : [...prev, { value: 50 }]
+      prev.length >= MAX_THRESHOLDS ? prev : [...prev, { value: 50 }]
     );
   };
 
@@ -154,8 +159,20 @@ export const BudgetNotificationForm = ({
       name: String(u.name ?? "Usuário"),
       email: u.email,
     }));
-    setOptions(mapped);
-  }, [usersResponse]);
+
+    setOptions(
+      currentUser?.id
+        ? [
+            {
+              id: String(currentUser.id),
+              email: currentUser?.email ?? "",
+              name: currentUser?.name ? `${currentUser.name} (You)` : "You",
+            },
+            ...mapped,
+          ]
+        : mapped
+    );
+  }, [usersResponse, currentUser]);
 
   const addUserIfNotExists = (opt: UserOption) => {
     const exists = selectedUsers.some((u) => u.userId === opt.id);
@@ -178,8 +195,21 @@ export const BudgetNotificationForm = ({
     setSelectedUsers(next);
   };
 
+  const handleThresholdsChange = (value: number, idx: number) => {
+    setThresholds((prev) =>
+      prev.map((th, i) =>
+        i === idx
+          ? {
+              value: Math.min(100, Math.max(1, value)),
+            }
+          : th
+      )
+    );
+  };
+
   const sizeProps = { width: 20, height: 20 };
   const disableRows = readonly || !enabled;
+  const isLoading = isLoadingUsers || isDebouncing;
 
   return (
     <div data-fs-bp-budget-notification>
@@ -200,8 +230,8 @@ export const BudgetNotificationForm = ({
 
       <div data-fs-bp-budget-notification-section-label>
         <span>
-          Set up to 5 thresholds and notify users when the total amount reaches
-          specific percentages
+          Set up to {MAX_THRESHOLDS} thresholds and notify users when the total
+          amount reaches specific percentages
         </span>
       </div>
 
@@ -240,37 +270,35 @@ export const BudgetNotificationForm = ({
                         title={
                           <div data-fs-bp-budget-notification-stepper>
                             <QuantitySelectorWithPercentage
-                              min={1}
+                              min={5}
                               max={100}
                               initial={t.value}
                               formatAsPercent
                               disabled={disableRows || parsedTotal <= 0}
-                              onChange={(val: number) =>
-                                setThresholds((prev) =>
-                                  prev.map((th, i) =>
-                                    i === idx
-                                      ? {
-                                          value: Math.min(
-                                            100,
-                                            Math.max(1, val)
-                                          ),
-                                        }
-                                      : th
-                                  )
-                                )
+                              onChange={(value) =>
+                                handleThresholdsChange(value, idx)
                               }
+                              increaseQuantityBy={5}
+                              decreaseQuantityBy={5}
                             />
                           </div>
                         }
                         enabled={!disableRows}
                         actionIcons={
-                          <Icon
-                            name="MinusCircle"
-                            {...sizeProps}
-                            data-fs-bp-budget-notification-remove
+                          <button
+                            data-fs-bp-budget-notification-remove-button
+                            type="button"
                             onClick={() => removeThreshold(idx)}
                             aria-label="Remove threshold"
-                          />
+                            title="Remove threshold"
+                            disabled={disableRows}
+                          >
+                            <Icon
+                              name="MinusCircle"
+                              {...sizeProps}
+                              data-fs-bp-budget-notification-remove
+                            />
+                          </button>
                         }
                       >
                         <Table.Cell>
@@ -294,7 +322,11 @@ export const BudgetNotificationForm = ({
               <button
                 type="button"
                 onClick={addThreshold}
-                disabled={disableRows || thresholds.length >= 5}
+                disabled={
+                  disableRows ||
+                  parsedTotal <= 0 ||
+                  thresholds.length >= MAX_THRESHOLDS
+                }
               >
                 Add threshold
               </button>
@@ -315,11 +347,17 @@ export const BudgetNotificationForm = ({
               shouldOpenOnFocus={false}
               autoComplete="off"
               shouldShowArrowDown={false}
+              isLoading={isLoading}
+              disabled={isLoading}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 setInputValue(e.target.value);
               }}
               options={
-                isLoadingUsers || isDebouncing ? [loadingObject] : options
+                isLoading
+                  ? [loadingObject]
+                  : options.filter(
+                      (opt) => !selectedUsers.some((u) => u.userId === opt.id)
+                    )
               }
               hasError={showUsersError && enabled && selectedUsers.length === 0}
               helperLabel={

package/src/features/budgets/components/BudgetNotificationForm/budget-notification-form.scss

@@ -1,11 +1,11 @@
 [data-fs-bp-budget-notification] {
-  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
-  @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-  @import "../../../shared/components/InputText/input-text.scss";
-  @import "../../../shared/components/Table/table.scss";
-  @import "../../../shared/components/ErrorMessage/error-message.scss";
-  @import "../BudgetUsersTable/budget-users-table.scss";
+  @import '@faststore/ui/src/components/molecules/Toggle/styles.scss';
+  @import '@faststore/ui/src/components/molecules/Tooltip/styles.scss';
+  @import '@faststore/ui/src/components/molecules/QuantitySelector/styles.scss';
+  @import '../../../shared/components/InputText/input-text.scss';
+  @import '../../../shared/components/Table/table.scss';
+  @import '../../../shared/components/ErrorMessage/error-message.scss';
+  @import '../BudgetUsersTable/budget-users-table.scss';
 
   padding-bottom: var(--fs-spacing-7);
 
@@ -29,7 +29,7 @@
   [data-fs-bp-budget-notification-section-label] {
     font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);
-    color: #5c5c5c;
+    color: var(--fs-bp-color-neutral-7);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
   }
 
@@ -38,7 +38,7 @@
     flex-direction: column;
     width: 100%;
 
-    @include media(">=notebook") {
+    @include media('>=notebook') {
       align-items: center;
       flex-direction: row;
       gap: var(--fs-spacing-3);
@@ -62,9 +62,9 @@
     }
   }
 
-  [data-fs-bp-autocomplete-dropdown]{
-    [data-fs-bp-autocomplete-dropdown-menu]{
-      z-index:2;
+  [data-fs-bp-autocomplete-dropdown] {
+    [data-fs-bp-autocomplete-dropdown-menu] {
+      z-index: 2;
     }
   }
 
@@ -99,7 +99,7 @@
             text-align: start;
             font-weight: var(--fs-text-weight-medium);
             font-size: var(--fs-text-size-1);
-            color: #5c5c5c;
+            color: var(--fs-bp-color-neutral-7);
             padding: var(--fs-spacing-2) 0;
           }
 
@@ -165,7 +165,7 @@
       }
     }
 
-    div[data-fs-quantity-selector="disabled"] {
+    div[data-fs-quantity-selector='disabled'] {
       [data-fs-input] {
         color: #c3c3c3;
       }
@@ -185,18 +185,23 @@
   [data-fs-bp-budget-notification-money] {
     font-weight: var(--fs-text-weight-regular);
     font-size: var(--fs-text-size-1);
-    color: #5C5C5C;
+    color: var(--fs-bp-color-neutral-7);
   }
 
   [data-fs-bp-budget-notification-remove] {
     color: #000000;
     stroke-width: 1.3rem;
+    cursor: pointer;
     &[disabled] {
       color: #9ca3af; /* gray when disabled */
       cursor: not-allowed;
     }
   }
 
+  [data-fs-bp-budget-notification-remove-button] {
+    cursor: pointer;
+  }
+
   [data-fs-bp-budget-notification-add] {
     margin-top: var(--fs-spacing-3);
     display: flex;
@@ -204,6 +209,7 @@
     gap: var(--fs-spacing-2);
 
     button {
+      cursor: pointer;
       height: var(--fs-spacing-6);
       width: 8.4375rem;
       border-radius: var(--fs-border-radius-pill);
@@ -214,6 +220,11 @@
       color: #0068d7;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-semibold);
+
+      &:disabled {
+        cursor: not-allowed;
+        color: #9ca3af; /* gray when disabled */
+      }
     }
   }
 }

package/src/features/budgets/components/BudgetUsersTable/BudgetUsersTable.tsx

@@ -4,7 +4,6 @@ import { Icon, Tooltip } from "@faststore/ui";
 
 import { Table } from "../../../shared/components";
 import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
-import { useBuyerPortal } from "../../../shared/hooks";
 
 type UserRow = {
   userId: string;
@@ -28,8 +27,6 @@ function BudgetUsersTableBase({
   className,
   disabled = false,
 }: BudgetUsersTableProps) {
-  const { clientContext } = useBuyerPortal();
-  const currClientId = clientContext.userId;
   const columns = getTableColumns({
     actionsLength: onRemove ? 1 : 0,
     nameColumnLabel: "User name",
@@ -64,16 +61,7 @@ function BudgetUsersTableBase({
             users.map((u) => (
               <Table.Row
                 key={u.userId}
-                title={
-                  currClientId === u.userId ? (
-                    <span>
-                      {u.userName}
-                      <span data-fs-bp-users-you> (you)</span>
-                    </span>
-                  ) : (
-                    u.userName
-                  )
-                }
+                title={u.userName}
                 enabled={!disabled}
                 actionIcons={(() => {
                   const rowDisabled =
@@ -85,6 +73,7 @@ function BudgetUsersTableBase({
                       aria-label={`Remove ${u.userName}`}
                       disabled={rowDisabled}
                       onClick={() => onRemove?.(u.userId)}
+                      title={rowDisabled ? undefined : `Remove ${u.userName}`}
                     >
                       <Icon name="MinusCircle" width={20} height={20} />
                     </button>

package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss

@@ -21,15 +21,6 @@
     width: 100%;
     max-width: none;
 
-    @include media(">=tablet") {
-      max-width: 30rem;
-      min-width: 30rem;
-    }
-
-    @include media(">=notebook") {
-      max-width: 40rem;
-    }
-
     [data-fs-divider] {
       border: var(--fs-border-radius-small) solid #e0e0e0;
       margin: var(--fs-spacing-4) 0rem;

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -23,12 +23,6 @@
       }
     }
 
-    @include media(">=notebook") {
-      &[data-fs-modal-content] {
-        max-width: 40rem;
-        width: 100%;
-      }
-    }
     [data-fs-divider] {
       border: var(--fs-border-radius-small) solid #e0e0e0;
       margin: var(--fs-spacing-4) 0rem;