Update CountryDropdown.tsx to improve language selector area

lib/components/CountryDropdown/CountryDropdown.tsx

@@ -51,7 +51,7 @@ const CountryDropdown = ({ url, className }: CountryDropdownProps) => {
     <Popover className={cx(className)}>
       <Popover.Button
         className={cx(
-          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-ssw-black outline-none xs:px-5",
+          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-ssw-black outline-none xl:pr-0",
           "hover:scale-105",
         )}
         onClick={() => setIsOpened(!isOpened)}
@@ -68,13 +68,13 @@ const CountryDropdown = ({ url, className }: CountryDropdownProps) => {
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 -translate-y-1"
       >
-        <Popover.Panel className="absolute z-10 bg-white text-center shadow-md shadow-gray-400">
+        <Popover.Panel className="absolute z-10 mt-2 border bg-white px-4 text-center shadow-md">
           {websites
             .filter((w) => w.country !== currentCountry)
             .map((country) => (
               <CustomLink
                 key={country.country}
-                className="block min-w-[80px] py-2 hover:scale-105"
+                className="block min-w-[35px] py-2 hover:scale-105"
                 href={country.url}
                 title={country.country}
               >

lib/components/MegaMenuLayout/MegaMenuLayout.tsx

@@ -81,7 +81,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
       <div
         className={cx(
           className,
-          "px-4 relative z-10 flex w-full items-center justify-center sm:h-[120px]",
+          "relative z-10 flex w-full items-center justify-center px-4 sm:h-[120px]",
         )}
       >
         <nav
@@ -123,7 +123,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             {isFlagVisible && <Divider />}
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-md text-gray-700 xs:px-4"
+              className="inline-flex items-center justify-center rounded-md pl-2 text-gray-700"
               onClick={() => setMobileMenuOpen(true)}
             >
               <span className="sr-only">Open main menu</span>
@@ -155,7 +155,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
           <RightSideActions />
         </div>
       ) : (
-        !hidePhone && <PhoneButton className="flex-grow pb-4 px-4 sm:hidden" />
+        !hidePhone && <PhoneButton className="flex-grow px-4 pb-4 sm:hidden" />
       )}
     </>
   );

lib/components/ui/Divider.tsx

@@ -2,5 +2,5 @@ import type { ClassValue } from "clsx";
 import { cx } from "../../util/cx";
 
 export const Divider = ({ className }: { className?: ClassValue }) => (
-  <div className={cx("mr-1 h-4 w-px bg-gray-700/30", className)}></div>
+  <div className={cx("h-4 w-px bg-gray-700/30", className)}></div>
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssw.megamenu",
-  "version": "4.13.8",
+  "version": "4.13.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/SSWConsulting/SSW.MegaMenu"

src/App.tsx

@@ -5,7 +5,7 @@ function App() {
   return (
     <>
       <header>Test MegaMenu</header>
-      <div className="mx-auto max-w-7xl px-8">
+      <div className="mx-auto max-w-7xl px-4">
         <MegaMenuLayout
           title="Rules"
           subtitle="Secret ingredients to quality software"