fix: mobile dropdown button menu

src/components/Button.jsx

@@ -4,10 +4,8 @@ import classNames from "classnames";
 
 const Button = ({
   className,
-  iconWrapperClassName,
   icon,
   color = "black",
-  iconChildren = null,
   hoverActive = true,
   fullwidth = false,
   loading = false,
@@ -27,15 +25,12 @@ const Button = ({
     className
   );
 
-  const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);
-
   const inner = (
     <div className="btn__body-wrap">
       <div className="btn__body">{children}</div>
       {!!icon && (
-        <div className={iconWrapperClass}>
+        <div className="btn__icon">
           <i className={icon}></i>
-          {iconChildren}
         </div>
       )}
     </div>

src/components/dropdown-button/DropdownButton.jsx

+import React from "react";
+import classNames from "classnames";
+
+const DropdownButton = ({
+  className,
+  color = "black",
+  hoverActive = true,
+  fullwidth = false,
+  loading = false,
+  disabled = false,
+  items,
+  children,
+  onClick,
+  ...props
+}) => {
+  const btnClass = classNames(
+    "btn btn--icon",
+    `btn--${color}`,
+    {
+      "btn--hoveractive": hoverActive,
+      "btn--fullwidth md:btn--autowidth": fullwidth,
+      "btn--loading": loading,
+    },
+    className
+  );
+
+  const inner = (
+    <div className="btn__body-wrap">
+      <button className="btn__body" onClick={onClick} disabled={disabled}>
+        {children}
+      </button>
+      <button className="btn__icon dropdown-button">
+        <i className="ico--chevron-down"></i>
+        <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
+          {items}
+        </ul>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className={btnClass} {...props}>
+      {inner}
+    </div>
+  );
+};
+
+export default DropdownButton;

src/components/dropdown-button/DropdownButtonItem.jsx

+import React from "react";
+
+const DropdownButtonItem = ({ onClick, children }) => {
+  return (
+    <li className="dropdown-button__choice hover:bg-grey-125" onClick={onClick}>
+      <span className="block px-4 py-3">{children}</span>
+    </li>
+  );
+};
+
+export default DropdownButtonItem;

src/components/dropdown-button/index.js

+export { default as DropdownButton } from "./DropdownButton";
+export { default as DropdownButtonItem } from "./DropdownButtonItem";

src/containers/AddAnnouncementForm.jsx

@@ -137,6 +137,7 @@ const AddAnnouncementForm = ({ className }) => {
         hoverActive
         loading={adding}
         disabled={adding}
+        fullwidth
       >
         Přidat oznámení
       </Button>

src/containers/AddPostForm.jsx

 import React, { useState } from "react";
 
 import { addPost, addProposal } from "actions/posts";
-import Button from "components/Button";
+import { DropdownButton, DropdownButtonItem } from "components/dropdown-button";
 import ErrorMessage from "components/ErrorMessage";
 import MarkdownEditor from "components/mde/MarkdownEditor";
 import { useActionState } from "hooks";
@@ -50,27 +50,6 @@ const AddPostForm = ({ className }) => {
     setType("procedure-proposal");
   };
 
-  const buttonDropdownActionList = (
-    <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
-      {type === "post" && (
-        <li
-          className="dropdown-button__choice hover:bg-grey-125"
-          onClick={setTypeProposal}
-        >
-          <span className="block px-4 py-3">Navrhnout postup</span>
-        </li>
-      )}
-      {type === "procedure-proposal" && (
-        <li
-          className="dropdown-button__choice hover:bg-grey-125"
-          onClick={setTypePost}
-        >
-          <span className="block px-4 py-3">Přidat příspěvek</span>
-        </li>
-      )}
-    </ul>
-  );
-
   return (
     <div className={className}>
       {addingPostError && (
@@ -100,18 +79,30 @@ const AddPostForm = ({ className }) => {
       />
 
       <div className="space-x-4">
-        <Button
+        <DropdownButton
           onClick={onAdd}
           disabled={addingPost || addingProposal}
           loading={addingPost || addingProposal}
+          fullwidth
+          items={
+            <>
+              {type === "post" && (
+                <DropdownButtonItem onClick={setTypeProposal}>
+                  Navrhnout postup
+                </DropdownButtonItem>
+              )}
+              {type === "procedure-proposal" && (
+                <DropdownButtonItem onClick={setTypePost}>
+                  Přidat příspěvek
+                </DropdownButtonItem>
+              )}
+            </>
+          }
           hoverActive
-          icon="ico--chevron-down"
-          iconWrapperClassName="dropdown-button"
-          iconChildren={buttonDropdownActionList}
         >
           {type === "post" && "Přidat příspěvek"}
           {type === "procedure-proposal" && "Navrhnout postup"}
-        </Button>
+        </DropdownButton>
 
         <span className="text-sm text-grey-200 hidden lg:inline">
           Pro pokročilejší formátování můžete používat{" "}