@licklist/design 0.44.486-dev.76 → 0.44.486-dev.78

package/dist/events/event-statistic-modal/EventStatisticModal.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 export type EventStatisticModalProps = {
     isOpen: boolean;
     setIsOpen: (value: boolean) => void;
+    date?: Event["startAt"] | null;
     eventStatistic?: EventStatistic | null;
     title?: string;
 };
-export declare const EventStatisticModal: ({ isOpen, setIsOpen, eventStatistic, title, }: EventStatisticModalProps) => JSX.Element;
+export declare const EventStatisticModal: ({ isOpen, setIsOpen, date, eventStatistic, title, }: EventStatisticModalProps) => JSX.Element;
 //# sourceMappingURL=EventStatisticModal.d.ts.map

package/dist/events/event-statistic-modal/EventStatisticModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventStatisticModal.d.ts","sourceRoot":"","sources":["../../../src/events/event-statistic-modal/EventStatisticModal.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAKlG,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,kDAK7B,wBAAwB,gBAgD1B,CAAC"}
+{"version":3,"file":"EventStatisticModal.d.ts","sourceRoot":"","sources":["../../../src/events/event-statistic-modal/EventStatisticModal.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAClG,OAAO,EAAE,KAAK,EAAE,MAAM,yDAAyD,CAAC;AAKhF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wDAM7B,wBAAwB,gBAiD1B,CAAC"}

package/dist/events/event-statistic-modal/EventStatisticModal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("react-i18next"),n=require("react-bootstrap"),r=require("../../static/Icon.js");require("../../table/MenuButton.js"),require("../../table/FilterHelperComponent.js"),require("../../table/PaginationHelperComponent.js"),require("../../table/PerPageHelperComponent.js");var s=require("../../table/StaticTable.js");require("../../table/TableHelperComponent.js"),require("../../table/ReactTableHelperComponent.js");var i=require("./hooks/useTableData.js");exports.EventStatisticModal=function(e){var t=e.isOpen,o=e.setIsOpen,c=e.eventStatistic,u=e.title,m=l.useTranslation("Design").t,d=i.useTableData(c),b=function(){o(!1)};return a.createElement(n.Modal,{show:t,onHide:b,animation:!1,centered:!0,contentClassName:"rounded",className:"event-statistic-modal"},a.createElement(n.Modal.Header,null,a.createElement(n.Modal.Title,{as:"h6"},null!=u?u:m("eventStatistic")),a.createElement(n.Button,{variant:"danger",className:"btn-sm rounded",onClick:b},a.createElement(r.default,{type:"times",height:"1rem"}))),a.createElement(n.Modal.Body,null,d.length?a.createElement(a.Fragment,null,a.createElement("h5",{className:"mb-5"},m("statistics")),a.createElement(s.StaticTable,{columns:[{key:"name",label:""},{key:"quantity",label:""},{key:"total",label:""}],data:d,className:"striped-static-table"})):a.createElement("div",{className:"no-statistic"},a.createElement("h5",null,m("noStatisticsForSelectedEvent")))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("react-i18next"),n=require("react-bootstrap"),r=require("../../static/Icon.js");require("../../table/MenuButton.js"),require("../../table/FilterHelperComponent.js"),require("../../table/PaginationHelperComponent.js"),require("../../table/PerPageHelperComponent.js");var s=require("../../table/StaticTable.js");require("../../table/TableHelperComponent.js"),require("../../table/ReactTableHelperComponent.js");var i=require("./hooks/useTableData.js");exports.EventStatisticModal=function(e){var t=e.isOpen,o=e.setIsOpen,c=e.date,u=e.eventStatistic,m=e.title,d=l.useTranslation("Design").t,b=i.useTableData(c,u),p=function(){o(!1)};return a.createElement(n.Modal,{show:t,onHide:p,animation:!1,centered:!0,contentClassName:"rounded",className:"event-statistic-modal"},a.createElement(n.Modal.Header,null,a.createElement(n.Modal.Title,{as:"h6"},null!=m?m:d("eventStatistic")),a.createElement(n.Button,{variant:"danger",className:"btn-sm rounded",onClick:p},a.createElement(r.default,{type:"times",height:"1rem"}))),a.createElement(n.Modal.Body,null,b.length?a.createElement(a.Fragment,null,a.createElement("h5",{className:"mb-5"},d("statistics")),a.createElement(s.StaticTable,{columns:[{key:"name",label:""},{key:"quantity",label:""},{key:"total",label:""}],data:b,className:"striped-static-table"})):a.createElement("div",{className:"no-statistic"},a.createElement("h5",null,d("noStatisticsForSelectedEvent")))))};

package/dist/events/event-statistic-modal/hooks/useTableData.d.ts

@@ -1,4 +1,5 @@
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { StaticTableData } from "../../../table";
-export declare const useTableData: (eventStatistic: EventStatistic | null) => StaticTableData[];
+export declare const useTableData: (date: Event["startAt"] | null, eventStatistic: EventStatistic | null) => StaticTableData[];
 //# sourceMappingURL=useTableData.d.ts.map

package/dist/events/event-statistic-modal/hooks/useTableData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableData.d.ts","sourceRoot":"","sources":["../../../../src/events/event-statistic-modal/hooks/useTableData.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAElG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,YAAY,mBAAoB,cAAc,GAAG,IAAI,sBA2EjE,CAAC"}
+{"version":3,"file":"useTableData.d.ts","sourceRoot":"","sources":["../../../../src/events/event-statistic-modal/hooks/useTableData.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAClG,OAAO,EAAE,KAAK,EAAE,MAAM,yDAAyD,CAAC;AAEhF,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,YAAY,SACjB,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,kBACb,cAAc,GAAG,IAAI,sBA+EtC,CAAC"}

package/dist/events/event-statistic-modal/hooks/useTableData.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),u=require("@licklist/core/dist/Config"),i=require("react-i18next"),a=e(require("clsx")),c=require("react-intl"),o=require("../utils/index.js");exports.useTableData=function(e){var s=i.useTranslation("Design").t,l=c.useIntl().formatNumber,f=t.__read(r.useState([]),2),d=f[0],y=f[1],T=function(e,t){return void 0===t&&(t=!1),n.createElement("div",{className:a("bold",t&&"header-row")},e)},b=function(e){var t=String(e);return Object.keys(o.TRANSLATION_KEYS).includes(t)?s(t):t};return r.useEffect((function(){y(function(e){if(!e)return[];var t=[];return o.convertEventStatisticToTableData(e).forEach((function(e){var r=e.name,n=e.quantity,i=e.total,a=e.isBold,c=e.isHeader,s=e.key,f=Object.keys(o.TRANSLATION_KEYS).includes(String(i))?i:l(Number(i),{style:"currency",currency:u.Currency.GBP}),d=b(r),y=b(n);a?t.push({name:T(d,c),quantity:T(y,c),total:T(r===o.TRANSLATION_KEYS.total?"Total: ".concat(f):f,c),key:s}):t.push({name:d,quantity:y,total:f,key:s})})),t}(e))}),[e]),d};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),u=require("@licklist/core/dist/Config"),i=require("react-i18next"),a=e(require("clsx")),c=require("react-intl"),o=require("../utils/index.js");exports.useTableData=function(e,s){var l=i.useTranslation("Design").t,f=c.useIntl().formatNumber,d=t.__read(r.useState([]),2),y=d[0],T=d[1],b=function(e,t){return void 0===t&&(t=!1),n.createElement("div",{className:a("bold",t&&"header-row")},e)},q=function(e){var t=String(e);return Object.keys(o.TRANSLATION_KEYS).includes(t)?l(t):t};return r.useEffect((function(){T(function(e,t){if(!t)return[];var r=[];return o.convertEventStatisticToTableData(e,t).forEach((function(e){var t=e.name,n=e.quantity,i=e.total,a=e.isBold,c=e.isHeader,s=e.key,l=Object.keys(o.TRANSLATION_KEYS).includes(String(i))?i:f(Number(i),{style:"currency",currency:u.Currency.GBP}),d=q(t),y=q(n);a?r.push({name:b(d,c),quantity:b(y,c),total:b(t===o.TRANSLATION_KEYS.total?"Total: ".concat(l):l,c),key:s}):r.push({name:d,quantity:y,total:l,key:s})})),r}(e,s))}),[e,s]),y};

package/dist/events/event-statistic-modal/utils/index.d.ts

@@ -4,7 +4,7 @@ export declare const TRANSLATION_KEYS: {
     total: string;
     totalPerCategory: string;
 };
-export declare const convertEventStatisticToTableData: (eventStatistic: EventStatistic) => {
+export declare const convertEventStatisticToTableData: (date: string, eventStatistic: EventStatistic) => {
     name: string;
     key: string;
     isHeader?: boolean;

package/dist/events/event-statistic-modal/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/events/event-statistic-modal/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAElG,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAO,MAAM,gCAAgC,mBAC3B,cAAc;UAUtB,MAAM;SACP,MAAM;eACA,OAAO;aACT,OAAO;cACN,MAAM,GAAG,MAAM;WAClB,MAAM,GAAG,MAAM;GA0DzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/events/event-statistic-modal/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAIlG,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,MAAM,kBACI,cAAc;UAUtB,MAAM;SACP,MAAM;eACA,OAAO;aACT,OAAO;cACN,MAAM,GAAG,MAAM;WAClB,MAAM,GAAG,MAAM;GA4DzB,CAAC"}

package/dist/events/event-statistic-modal/utils/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t={shortQuantity:"shortQuantity",total:"total",totalPerCategory:"totalPerCategory"};exports.TRANSLATION_KEYS=t,exports.convertEventStatisticToTableData=function(a){var o,n=0,e=0;if(!a)return[];var r=[];return null===(o=Object.values(null==a?void 0:a.productCategorySummary))||void 0===o||o.forEach((function(a){null==a||a.forEach((function(a){var o=a.totalPerCategory,c=a.productsSummary,l=void 0===c?[]:c,u=a.categoryName,i=a.eventId,y=0;n+=o||0,r.push({name:u,key:"".concat(i,".").concat(u),isBold:!0,isHeader:!0,quantity:t.shortQuantity,total:t.total}),null==l||l.forEach((function(t){var a=t.productsSold,o=t.name,n=t.totalQuantity,e=t.total;y+=a,r.push({name:o,key:"".concat(i,".").concat(u,".").concat(o),quantity:n?"".concat(a," / ").concat(n):String(a),total:String(e)})})),r.push({name:t.totalPerCategory,key:"".concat(i,".").concat(u,".").concat(t.totalPerCategory),quantity:y,total:o,isBold:!0}),e+=y}))})),r.push({name:t.total,key:"".concat(t.total,".").concat(n),quantity:e,total:n,isBold:!0}),r};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@licklist/core/dist/Config"),o=require("luxon"),a={shortQuantity:"shortQuantity",total:"total",totalPerCategory:"totalPerCategory"};exports.TRANSLATION_KEYS=a,exports.convertEventStatisticToTableData=function(e,r){var n,c,l=0,i=0;if(!r)return[];var u=[],s=o.DateTime.fromISO(e).toUTC().toFormat(t.DATE_TIME_FULL_FORMAT);return null===(c=Object.values(null!==(n=null==r?void 0:r.productCategorySummary[s])&&void 0!==n?n:{}))||void 0===c||c.forEach((function(t){var o=t.totalPerCategory,e=t.productsSummary,r=void 0===e?[]:e,n=t.categoryName,c=t.eventId,s=0;l+=o||0,u.push({name:n,key:"".concat(c,".").concat(n),isBold:!0,isHeader:!0,quantity:a.shortQuantity,total:a.total}),null==r||r.forEach((function(t){var o=t.productsSold,a=t.name,e=t.totalQuantity,r=t.total;s+=o,u.push({name:a,key:"".concat(c,".").concat(n,".").concat(a),quantity:e?"".concat(o," / ").concat(e):String(o),total:String(r)})})),u.push({name:a.totalPerCategory,key:"".concat(c,".").concat(n,".").concat(a.totalPerCategory),quantity:s,total:o,isBold:!0}),i+=s})),u.push({name:a.total,key:"".concat(a.total,".").concat(l),quantity:i,total:l,isBold:!0}),u};

package/dist/styles/resources-blocking/_index.scss

@@ -7,9 +7,14 @@
     overflow: auto;
   }
 
+
   .modal-form-content {
     max-height: 21rem;
     overflow-x: hidden;
+
+    .error-content {
+      min-width: 25rem;
+    }
   }
 
   .reccurrence-interval-container {
@@ -71,6 +76,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+
   }
 
   .custom-checkbox {
@@ -137,6 +143,10 @@
     }
   }
 
+  .footer-with-short-notes {
+    min-width: 18rem;
+  }
+
   footer {
     display: flex;
     gap: 1.25rem;
@@ -153,3 +163,4 @@
     }
   }
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.486-dev.76",
+  "version": "0.44.486-dev.78",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import Icon from "../../static/Icon";
 import { StaticTable } from "../../table";
 import { useTableData } from "./hooks/useTableData";
@@ -9,6 +10,7 @@ import { useTableData } from "./hooks/useTableData";
 export type EventStatisticModalProps = {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
+  date?: Event["startAt"] | null;
   eventStatistic?: EventStatistic | null;
   title?: string;
 };
@@ -16,11 +18,13 @@ export type EventStatisticModalProps = {
 export const EventStatisticModal = ({
   isOpen,
   setIsOpen,
+  date,
   eventStatistic,
   title,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation("Design");
-  const data = useTableData(eventStatistic);
+
+  const data = useTableData(date, eventStatistic);
   const handleClose = () => {
     setIsOpen(false);
   };

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -4,10 +4,14 @@ import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
 import * as Config from "@licklist/core/dist/Config";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { convertEventStatisticToTableData, TRANSLATION_KEYS } from "../utils";
 import { StaticTableData } from "../../../table";
 
-export const useTableData = (eventStatistic: EventStatistic | null) => {
+export const useTableData = (
+  date: Event["startAt"] | null,
+  eventStatistic: EventStatistic | null
+) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
   const [tableRows, setTableRows] = useState<StaticTableData[]>([]);
@@ -28,14 +32,17 @@ export const useTableData = (eventStatistic: EventStatistic | null) => {
     return t(key);
   };
 
-  const transformStatisticToTableRows = (statistic: EventStatistic | null) => {
+  const transformStatisticToTableRows = (
+    date: Event["startAt"],
+    statistic: EventStatistic | null
+  ) => {
     if (!statistic) {
       return [];
     }
 
     const tableDataRows: StaticTableData[] = [];
 
-    convertEventStatisticToTableData(statistic).forEach(
+    convertEventStatisticToTableData(date, statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total)
@@ -77,9 +84,9 @@ export const useTableData = (eventStatistic: EventStatistic | null) => {
   };
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(eventStatistic));
+    setTableRows(transformStatisticToTableRows(date, eventStatistic));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eventStatistic]);
+  }, [date, eventStatistic]);
 
   return tableRows;
 };

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,4 +1,6 @@
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { DateTime } from "luxon";
+import { DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 
 export const TRANSLATION_KEYS = {
   shortQuantity: "shortQuantity",
@@ -7,6 +9,7 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
+  date: string,
   eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
@@ -25,49 +28,51 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  Object.values(eventStatistic?.productCategorySummary)?.forEach(
-    (categories) => {
-      categories?.forEach(
-        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-          let quantity = 0;
+  const summaryFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_TIME_FULL_FORMAT);
 
-          totalAmount += totalPerCategory || 0;
+  Object.values(
+    eventStatistic?.productCategorySummary[summaryFormattedDate] ?? {}
+  )?.forEach(
+    ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+      let quantity = 0;
 
-          tableDataArray.push({
-            name: categoryName,
-            key: `${eventId}.${categoryName}`,
-            isBold: true,
-            isHeader: true,
-            quantity: TRANSLATION_KEYS.shortQuantity,
-            total: TRANSLATION_KEYS.total,
-          });
+      totalAmount += totalPerCategory || 0;
 
-          productsSummary?.forEach(
-            ({ productsSold, name, totalQuantity, total }) => {
-              quantity += productsSold;
+      tableDataArray.push({
+        name: categoryName,
+        key: `${eventId}.${categoryName}`,
+        isBold: true,
+        isHeader: true,
+        quantity: TRANSLATION_KEYS.shortQuantity,
+        total: TRANSLATION_KEYS.total,
+      });
 
-              tableDataArray.push({
-                name,
-                key: `${eventId}.${categoryName}.${name}`,
-                quantity: totalQuantity
-                  ? `${productsSold} / ${totalQuantity}`
-                  : String(productsSold),
-                total: String(total),
-              });
-            }
-          );
+      productsSummary?.forEach(
+        ({ productsSold, name, totalQuantity, total }) => {
+          quantity += productsSold;
 
           tableDataArray.push({
-            name: TRANSLATION_KEYS.totalPerCategory,
-            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
-            quantity,
-            total: totalPerCategory,
-            isBold: true,
+            name,
+            key: `${eventId}.${categoryName}.${name}`,
+            quantity: totalQuantity
+              ? `${productsSold} / ${totalQuantity}`
+              : String(productsSold),
+            total: String(total),
           });
-
-          totalQuantity += quantity;
         }
       );
+
+      tableDataArray.push({
+        name: TRANSLATION_KEYS.totalPerCategory,
+        key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+        quantity,
+        total: totalPerCategory,
+        isBold: true,
+      });
+
+      totalQuantity += quantity;
     }
   );
 

package/src/styles/resources-blocking/_index.scss

@@ -7,9 +7,14 @@
     overflow: auto;
   }
 
+
   .modal-form-content {
     max-height: 21rem;
     overflow-x: hidden;
+
+    .error-content {
+      min-width: 25rem;
+    }
   }
 
   .reccurrence-interval-container {
@@ -71,6 +76,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+
   }
 
   .custom-checkbox {
@@ -137,6 +143,10 @@
     }
   }
 
+  .footer-with-short-notes {
+    min-width: 18rem;
+  }
+
   footer {
     display: flex;
     gap: 1.25rem;
@@ -153,3 +163,4 @@
     }
   }
 }
+