fixed mobile width, added copy

src/App.css

@@ -3,7 +3,7 @@
 }
 
 .container {
-  padding: 4rem;
+  padding: 2rem;
   align-items: center;
   justify-content: center;
   display: flex;
@@ -53,6 +53,14 @@
   gap: 1rem;
 }
 
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
 .footer {
   margin-top: 2rem;
   font-family: "YurukaStd";

src/App.jsx

@@ -7,6 +7,8 @@ import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import Picker from "./components/Picker";
 
+const { ClipboardItem } = window;
+
 function App() {
   const [character, setCharacter] = useState(49);
   const [text, setText] = useState(characters[character].defaultText.text);
@@ -65,6 +67,32 @@ function App() {
     link.click();
   };
 
+  function b64toBlob(b64Data, contentType = null, sliceSize = null) {
+    contentType = contentType || "image/png";
+    sliceSize = sliceSize || 512;
+    let byteCharacters = atob(b64Data);
+    let byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+      let slice = byteCharacters.slice(offset, offset + sliceSize);
+      let byteNumbers = new Array(slice.length);
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i);
+      }
+      var byteArray = new Uint8Array(byteNumbers);
+      byteArrays.push(byteArray);
+    }
+    return new Blob(byteArrays, { type: contentType });
+  }
+
+  const copy = async () => {
+    const canvas = document.getElementsByTagName("canvas")[0];
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        "image/png": b64toBlob(canvas.toDataURL().split(",")[1]),
+      }),
+    ]);
+  };
+
   return (
     <div className="App">
       <div className="container">
@@ -133,6 +161,11 @@ function App() {
           </div>
           <div className="picker">
             <Picker setCharacter={setCharacter} />
+          </div>
+          <div className="buttons">
+            <Button color="secondary" onClick={copy}>
+              copy
+            </Button>
             <Button color="secondary" onClick={download}>
               download
             </Button>

src/components/Picker.jsx

@@ -39,7 +39,14 @@ export default function Picker({ setCharacter }) {
           horizontal: "left",
         }}
       >
-        <ImageList sx={{ width: 500, height: 450 }} cols={4} rowHeight={120}>
+        <ImageList
+          sx={{
+            width: window.innerWidth < 600 ? 300 : 500,
+            height: 450,
+          }}
+          cols={window.innerWidth < 600 ? 3 : 4}
+          rowHeight={120}
+        >
           {characters.map((c, index) => (
             <ImageListItem
               key={index}