Thumbnail-Crafter.mini.mcp_experiment

Running

ChunDe Claude commited on 19 days ago

Commit

d06267b

1 Parent(s): 72660a6

feat: Add responsive UI scaling and fix Bison font loading

- Implement 10% UI scaling reduction below 1024px breakpoint
- Scale all UI components: Sidebar, ExportButton, BgColorSelector, CanvasSizeSelector, TextToolbar
- Fix Bison font loading by removing parentheses from filename
- Add font preload for better loading performance
- Clean up debug console.logs from Canvas components
- Add resize listeners for proper responsive behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Files changed (16) hide show

.claude/settings.local.json +2 -1
dist/index.html +5 -2
index.html +3 -0
package-lock.json +18 -0
package.json +1 -0
public/fonts/Bison-Bold(PersonalUse).ttf +0 -0
dist/fonts/Bison-Bold(PersonalUse).ttf → public/fonts/Bison-Bold.ttf +0 -0
src/components/Canvas/Canvas.tsx +0 -6
src/components/Canvas/CanvasObject.tsx +0 -1
src/components/CanvasHeader/BgColorSelector.tsx +9 -50
src/components/CanvasHeader/CanvasSizeSelector.tsx +24 -36
src/components/ExportButton/ExportButton.tsx +10 -37
src/components/Sidebar/Sidebar.tsx +16 -16
src/components/TextToolbar/ColorPicker.tsx +0 -1
src/components/TextToolbar/TextToolbar.tsx +57 -28
src/index.css +2 -2

.claude/settings.local.json CHANGED Viewed

@@ -37,7 +37,8 @@
       "Bash(git config:*)",
       "Bash(vite build:*)",
       "Bash(npx vite build)",
-      "Bash(git fetch:*)"
     ],
     "deny": [],
     "ask": []

       "Bash(git config:*)",
       "Bash(vite build:*)",
       "Bash(npx vite build)",
+      "Bash(git fetch:*)",
+      "Bash(move:*)"
     ],
     "deny": [],
     "ask": []

dist/index.html CHANGED Viewed

@@ -11,13 +11,16 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
     <!-- Preconnect to Hugging Face CDN for faster Huggy image loading -->
     <link rel="preconnect" href="https://datasets-server.huggingface.co" crossorigin>
     <link rel="dns-prefetch" href="https://datasets-server.huggingface.co">
-    <script type="module" crossorigin src="/assets/index-B75Va-HN.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/react-vendor-DzFEYc3-.js">
     <link rel="modulepreload" crossorigin href="/assets/konva-vendor-CFBUcegD.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-C5nIs3Dc.css">
   </head>
   <body>
     <div id="root"></div>

     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <!-- Preload Bison font -->
+    <link rel="preload" href="/fonts/Bison-Bold.ttf" as="font" type="font/ttf" crossorigin>
     <!-- Preconnect to Hugging Face CDN for faster Huggy image loading -->
     <link rel="preconnect" href="https://datasets-server.huggingface.co" crossorigin>
     <link rel="dns-prefetch" href="https://datasets-server.huggingface.co">
+    <script type="module" crossorigin src="/assets/index-DdtTDuVR.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/react-vendor-DzFEYc3-.js">
     <link rel="modulepreload" crossorigin href="/assets/konva-vendor-CFBUcegD.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-D-X_GJYx.css">
   </head>
   <body>
     <div id="root"></div>

index.html CHANGED Viewed

@@ -11,6 +11,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
     <!-- Preconnect to Hugging Face CDN for faster Huggy image loading -->
     <link rel="preconnect" href="https://datasets-server.huggingface.co" crossorigin>
     <link rel="dns-prefetch" href="https://datasets-server.huggingface.co">

     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;700&family=Source+Sans+3:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <!-- Preload Bison font -->
+    <link rel="preload" href="/fonts/Bison-Bold.ttf" as="font" type="font/ttf" crossorigin>
     <!-- Preconnect to Hugging Face CDN for faster Huggy image loading -->
     <link rel="preconnect" href="https://datasets-server.huggingface.co" crossorigin>
     <link rel="dns-prefetch" href="https://datasets-server.huggingface.co">

package-lock.json CHANGED Viewed

@@ -16,6 +16,7 @@
         "use-image": "^1.1.4"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
@@ -1196,6 +1197,16 @@
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -2969,6 +2980,13 @@
         "node": ">=14.17"
       }
     },
     "node_modules/update-browserslist-db": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",

         "use-image": "^1.1.4"
       },
       "devDependencies": {
+        "@types/node": "^24.10.1",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",

package.json CHANGED Viewed

@@ -18,6 +18,7 @@
     "use-image": "^1.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

     "use-image": "^1.1.4"
   },
   "devDependencies": {
+    "@types/node": "^24.10.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

public/fonts/Bison-Bold(PersonalUse).ttf DELETED Viewed

Binary file (28 kB)

dist/fonts/Bison-Bold(PersonalUse).ttf → public/fonts/Bison-Bold.ttf RENAMED Viewed

File without changes

src/components/Canvas/Canvas.tsx CHANGED Viewed

@@ -178,10 +178,7 @@ export default function Canvas({
           .map(id => shapeRefs.current.get(id))
           .filter((node): node is Konva.Node => node !== undefined);
-        console.log(`Attempt ${attempt}: Attaching transformer to:`, selectedIds, 'Found nodes:', nodes.length);
         if (nodes.length > 0) {
-          console.log('SUCCESS: Attaching transformer to', nodes.length, 'nodes');
           transformerRef.current!.nodes(nodes);
           transformerRef.current!.show();
           transformerRef.current!.forceUpdate();
@@ -189,13 +186,10 @@ export default function Canvas({
           if (layer) {
             layer.batchDraw();
           }
-          console.log('Transformer attached and layer redrawn');
         } else if (attempt < 10) {
           // Retry up to 10 times with increasing delays (up to 500ms)
           const delay = Math.min(50 * (attempt + 1), 100);
           setTimeout(() => attemptAttachment(attempt + 1), delay);
-        } else {
-          console.error('Failed to attach transformer after 10 attempts. Selected IDs:', selectedIds);
         }
       } else {
         transformerRef.current!.nodes([]);

           .map(id => shapeRefs.current.get(id))
           .filter((node): node is Konva.Node => node !== undefined);
         if (nodes.length > 0) {
           transformerRef.current!.nodes(nodes);
           transformerRef.current!.show();
           transformerRef.current!.forceUpdate();
           if (layer) {
             layer.batchDraw();
           }
         } else if (attempt < 10) {
           // Retry up to 10 times with increasing delays (up to 500ms)
           const delay = Math.min(50 * (attempt + 1), 100);
           setTimeout(() => attemptAttachment(attempt + 1), delay);
         }
       } else {
         transformerRef.current!.nodes([]);

src/components/Canvas/CanvasObject.tsx CHANGED Viewed

@@ -164,7 +164,6 @@ function ImageRenderer({
       id={object.id}
       ref={(node) => {
         nodeRef.current = node;
-        console.log('ImageRenderer ref callback:', object.id, 'Node:', node);
         if (typeof shapeRef === 'function') {
           shapeRef(node);
         } else if (shapeRef) {

       id={object.id}
       ref={(node) => {
         nodeRef.current = node;
         if (typeof shapeRef === 'function') {
           shapeRef(node);
         } else if (shapeRef) {

src/components/CanvasHeader/BgColorSelector.tsx CHANGED Viewed

@@ -13,44 +13,21 @@ export default function BgColorSelector({ bgColor, onChange }: BgColorSelectorPr
   const [hoveredColor, setHoveredColor] = useState<CanvasBgColor | null>(null);
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-      <span style={{
-        color: '#999999',
-        fontSize: '16px',
-        fontWeight: 'normal',
-        fontFamily: 'Inter, sans-serif'
-      }}>
         Background color:
       </span>
       {/* Outer pill container */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '5px',
-        height: '40px',
-        padding: '4px',
-        background: '#EDF0F2',
-        border: '1px solid #F8F9FA',
-        borderRadius: '99px'
-      }}>
         {/* Serious Light option */}
         <button
           onClick={() => onChange('seriousLight')}
           onMouseEnter={() => setHoveredColor('seriousLight')}
           onMouseLeave={() => setHoveredColor(null)}
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '38px',
-            height: '32px',
-            padding: '10px',
-            background: bgColor === 'seriousLight' ? '#DEE2E7' : (hoveredColor === 'seriousLight' ? '#f0f2f4' : 'transparent'),
-            border: 'none',
-            borderRadius: '99px',
-            cursor: 'pointer',
-            transition: 'background 0.15s ease-in-out'
           }}
           title="Serious Light background"
         >
@@ -62,18 +39,9 @@ export default function BgColorSelector({ bgColor, onChange }: BgColorSelectorPr
           onClick={() => onChange('light')}
           onMouseEnter={() => setHoveredColor('light')}
           onMouseLeave={() => setHoveredColor(null)}
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '38px',
-            height: '32px',
-            padding: '10px',
-            background: bgColor === 'light' ? '#DEE2E7' : (hoveredColor === 'light' ? '#f0f2f4' : 'transparent'),
-            border: 'none',
-            borderRadius: '99px',
-            cursor: 'pointer',
-            transition: 'background 0.15s ease-in-out'
           }}
           title="Light background with gradients"
         >
@@ -85,18 +53,9 @@ export default function BgColorSelector({ bgColor, onChange }: BgColorSelectorPr
           onClick={() => onChange('dark')}
           onMouseEnter={() => setHoveredColor('dark')}
           onMouseLeave={() => setHoveredColor(null)}
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '38px',
-            height: '32px',
-            padding: '10px',
-            background: bgColor === 'dark' ? '#DEE2E7' : (hoveredColor === 'dark' ? '#f0f2f4' : 'transparent'),
-            border: 'none',
-            borderRadius: '99px',
-            cursor: 'pointer',
-            transition: 'background 0.15s ease-in-out'
           }}
           title="Dark background"
         >

   const [hoveredColor, setHoveredColor] = useState<CanvasBgColor | null>(null);
   return (
+    <div className="flex items-center gap-[9px] lg:gap-[10px]">
+      <span className="text-[#999999] text-[14px] lg:text-[16px] font-normal" style={{ fontFamily: 'Inter, sans-serif' }}>
         Background color:
       </span>
       {/* Outer pill container */}
+      <div className="flex items-center gap-[4.5px] lg:gap-[5px] h-[36px] lg:h-[40px] p-[3.6px] lg:p-[4px] bg-[#EDF0F2] border border-[#F8F9FA] rounded-[99px]">
         {/* Serious Light option */}
         <button
           onClick={() => onChange('seriousLight')}
           onMouseEnter={() => setHoveredColor('seriousLight')}
           onMouseLeave={() => setHoveredColor(null)}
+          className="flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out"
           style={{
+            background: bgColor === 'seriousLight' ? '#DEE2E7' : (hoveredColor === 'seriousLight' ? '#f0f2f4' : 'transparent')
           }}
           title="Serious Light background"
         >
           onClick={() => onChange('light')}
           onMouseEnter={() => setHoveredColor('light')}
           onMouseLeave={() => setHoveredColor(null)}
+          className="flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out"
           style={{
+            background: bgColor === 'light' ? '#DEE2E7' : (hoveredColor === 'light' ? '#f0f2f4' : 'transparent')
           }}
           title="Light background with gradients"
         >
           onClick={() => onChange('dark')}
           onMouseEnter={() => setHoveredColor('dark')}
           onMouseLeave={() => setHoveredColor(null)}
+          className="flex items-center justify-center w-[34px] lg:w-[38px] h-[29px] lg:h-[32px] p-[9px] lg:p-[10px] border-none rounded-[99px] cursor-pointer transition-[background] duration-150 ease-in-out"
           style={{
+            background: bgColor === 'dark' ? '#DEE2E7' : (hoveredColor === 'dark' ? '#f0f2f4' : 'transparent')
           }}
           title="Dark background"
         >

src/components/CanvasHeader/CanvasSizeSelector.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState } from 'react';
 import { CanvasSize } from '../../types/canvas.types';
 import IconXSize from '../Icons/IconXSize';
 import IconLinkedInSize from '../Icons/IconLinkedInSize';
@@ -17,6 +17,16 @@ const sizeLabels: Record<CanvasSize, string> = {
 export default function CanvasSizeSelector({ canvasSize, onChange }: CanvasSizeSelectorProps) {
   const [hoveredSize, setHoveredSize] = useState<CanvasSize | null>(null);
   const renderSizeButton = (
     size: CanvasSize,
@@ -31,37 +41,29 @@ export default function CanvasSizeSelector({ canvasSize, onChange }: CanvasSizeS
         onClick={() => onChange(size)}
         onMouseEnter={() => setHoveredSize(size)}
         onMouseLeave={() => setHoveredSize(null)}
         style={{
-          display: 'flex',
-          alignItems: 'center',
           justifyContent: isSelected ? 'flex-start' : 'center',
-          gap: '5px',
-          height: '32px',
-          minWidth: '38px',
-          paddingLeft: isSelected ? '10px' : '9px',
-          paddingRight: isSelected ? '10px' : '9px',
-          background: isSelected ? '#DEE2E7' : (isHovered ? '#f0f2f4' : 'transparent'),
-          border: 'none',
-          borderRadius: '99px',
-          cursor: 'pointer',
-          transition: 'background 0.15s ease-in-out, padding 0.15s ease-in-out, min-width 0.15s ease-in-out',
-          overflow: 'hidden'
         }}
         title={title}
       >
         <Icon selected={isSelected} />
         <span
           style={{
             color: '#32343d',
-            fontSize: '16px',
             fontWeight: 'normal',
             fontFamily: 'Inter, sans-serif',
-            whiteSpace: 'nowrap',
             opacity: isSelected ? 0.6 : 0,
             transform: isSelected ? 'translateX(0)' : 'translateX(-10px)',
-            transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out',
-            width: isSelected ? 'auto' : '0',
-            overflow: 'hidden'
           }}
         >
           {sizeLabels[size]}
@@ -71,27 +73,13 @@ export default function CanvasSizeSelector({ canvasSize, onChange }: CanvasSizeS
   };
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-      <span style={{
-        color: '#999999',
-        fontSize: '16px',
-        fontWeight: 'normal',
-        fontFamily: 'Inter, sans-serif'
-      }}>
         Size:
       </span>
       {/* Outer pill container */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '5px',
-        height: '40px',
-        padding: '4px',
-        background: '#EDF0F2',
-        border: '1px solid #F8F9FA',
-        borderRadius: '99px'
-      }}>
         {renderSizeButton('1200x675', IconXSize, '1200×675 (Default)')}
         {renderSizeButton('linkedin', IconLinkedInSize, 'LinkedIn size (1200x627)')}
         {renderSizeButton('hf', IconHFSize, 'HF custom size (1160x580)')}

+import { useState, useEffect } from 'react';
 import { CanvasSize } from '../../types/canvas.types';
 import IconXSize from '../Icons/IconXSize';
 import IconLinkedInSize from '../Icons/IconLinkedInSize';
 export default function CanvasSizeSelector({ canvasSize, onChange }: CanvasSizeSelectorProps) {
   const [hoveredSize, setHoveredSize] = useState<CanvasSize | null>(null);
+  const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLargeScreen(window.innerWidth >= 1024);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
   const renderSizeButton = (
     size: CanvasSize,
         onClick={() => onChange(size)}
         onMouseEnter={() => setHoveredSize(size)}
         onMouseLeave={() => setHoveredSize(null)}
+        className="flex items-center border-none rounded-[99px] cursor-pointer overflow-hidden transition-[background,padding,min-width] duration-150 ease-in-out"
         style={{
           justifyContent: isSelected ? 'flex-start' : 'center',
+          gap: '4.5px',
+          height: isLargeScreen ? '32px' : '29px',
+          minWidth: isLargeScreen ? '38px' : '34px',
+          paddingLeft: isSelected ? (isLargeScreen ? '10px' : '9px') : (isLargeScreen ? '9px' : '8px'),
+          paddingRight: isSelected ? (isLargeScreen ? '10px' : '9px') : (isLargeScreen ? '9px' : '8px'),
+          background: isSelected ? '#DEE2E7' : (isHovered ? '#f0f2f4' : 'transparent')
         }}
         title={title}
       >
         <Icon selected={isSelected} />
         <span
+          className="whitespace-nowrap overflow-hidden transition-[opacity,transform] duration-150 ease-in-out"
           style={{
             color: '#32343d',
+            fontSize: isLargeScreen ? '16px' : '14px',
             fontWeight: 'normal',
             fontFamily: 'Inter, sans-serif',
             opacity: isSelected ? 0.6 : 0,
             transform: isSelected ? 'translateX(0)' : 'translateX(-10px)',
+            width: isSelected ? 'auto' : '0'
           }}
         >
           {sizeLabels[size]}
   };
   return (
+    <div className="flex items-center gap-[9px] lg:gap-[10px]">
+      <span className="text-[#999999] text-[14px] lg:text-[16px] font-normal" style={{ fontFamily: 'Inter, sans-serif' }}>
         Size:
       </span>
       {/* Outer pill container */}
+      <div className="flex items-center gap-[4.5px] lg:gap-[5px] h-[36px] lg:h-[40px] p-[3.6px] lg:p-[4px] bg-[#EDF0F2] border border-[#F8F9FA] rounded-[99px]">
         {renderSizeButton('1200x675', IconXSize, '1200×675 (Default)')}
         {renderSizeButton('linkedin', IconLinkedInSize, 'LinkedIn size (1200x627)')}
         {renderSizeButton('hf', IconHFSize, 'HF custom size (1160x580)')}

src/components/ExportButton/ExportButton.tsx CHANGED Viewed

@@ -58,17 +58,10 @@ export default function ExportButton({ onExport, isExporting = false, currentLay
   return (
     <div
       style={{
-        position: 'fixed',
-        top: '30px',
-        right: '22px',
-        zIndex: 50,
         backgroundColor: '#262933',
         borderRadius: '10px',
-        padding: '5px',
-        display: 'inline-flex',
-        alignItems: 'stretch',
-        gap: '5px',
         boxShadow: '0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0.03), 0px 0px 6.417px 0px rgba(0,0,0,0.09), 0px 0px 4.583px 0px rgba(0,0,0,0.15), 0px 0px 2.75px 0px rgba(0,0,0,0.17), 0px 16.847px 21.059px -4.212px rgba(14,13,13,0.1), 0px 8.423px 8.423px -4.212px rgba(0,0,0,0.04)',
         opacity: isExporting ? 0.5 : 1,
         transition: 'all 0.2s ease-in-out',
@@ -81,40 +74,27 @@ export default function ExportButton({ onExport, isExporting = false, currentLay
         disabled={isExporting}
         onMouseEnter={() => setIsHoveringButton(true)}
         onMouseLeave={() => setIsHoveringButton(false)}
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
           backgroundColor: isHoveringButton ? '#0d6ecc' : '#1888ff',
-          borderRadius: '5px',
-          width: '32px',
-          aspectRatio: '1',
-          flexShrink: 0,
-          border: 'none',
-          cursor: isExporting ? 'not-allowed' : 'pointer',
-          padding: 0
         }}
       >
         {isExporting ? (
-          <Loader2 size={16} color="white" style={{ animation: 'spin 1s linear infinite' }} />
         ) : (
-          <Download size={16} color="white" />
         )}
       </button>
       {/* Filename Container */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: '2px', paddingRight: '5px', minHeight: '32px' }}>
         {/* Hidden span to measure text width */}
         <span
           ref={spanRef}
           style={{
-            position: 'absolute',
-            visibility: 'hidden',
-            whiteSpace: 'pre',
-            fontSize: '16px',
-            fontFamily: 'Inter, sans-serif',
-            fontWeight: 'normal',
-            padding: '5px'
           }}
         >
           {filename || 'thumbnail_name'}
@@ -128,16 +108,9 @@ export default function ExportButton({ onExport, isExporting = false, currentLay
           onBlur={() => setIsFocused(false)}
           disabled={isExporting}
           placeholder="thumbnail_name"
           style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.05)',
-            color: 'white',
-            fontSize: '16px',
             fontFamily: 'Inter, sans-serif',
-            fontWeight: 'normal',
-            outline: 'none',
-            border: 'none',
-            padding: '5px',
-            borderRadius: '4px',
             width: `${inputWidth}px`,
             cursor: isExporting ? 'not-allowed' : 'text',
             opacity: isFocused ? 1 : 0.5,
@@ -145,7 +118,7 @@ export default function ExportButton({ onExport, isExporting = false, currentLay
           }}
           onClick={(e) => e.stopPropagation()}
         />
-        <span style={{ color: 'white', fontSize: '16px', fontFamily: 'Inter, sans-serif', fontWeight: 'normal' }}>
           .png
         </span>
       </div>

   return (
     <div
+      className="fixed top-[27px] lg:top-[30px] right-[20px] lg:right-[22px] z-50 p-[4px] lg:p-[5px] inline-flex items-stretch gap-[4px] lg:gap-[5px]"
       style={{
         backgroundColor: '#262933',
         borderRadius: '10px',
         boxShadow: '0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0.03), 0px 0px 6.417px 0px rgba(0,0,0,0.09), 0px 0px 4.583px 0px rgba(0,0,0,0.15), 0px 0px 2.75px 0px rgba(0,0,0,0.17), 0px 16.847px 21.059px -4.212px rgba(14,13,13,0.1), 0px 8.423px 8.423px -4.212px rgba(0,0,0,0.04)',
         opacity: isExporting ? 0.5 : 1,
         transition: 'all 0.2s ease-in-out',
         disabled={isExporting}
         onMouseEnter={() => setIsHoveringButton(true)}
         onMouseLeave={() => setIsHoveringButton(false)}
+        className="flex items-center justify-center rounded-[5px] w-[29px] lg:w-[32px] aspect-square flex-shrink-0 border-none p-0"
         style={{
           backgroundColor: isHoveringButton ? '#0d6ecc' : '#1888ff',
+          cursor: isExporting ? 'not-allowed' : 'pointer'
         }}
       >
         {isExporting ? (
+          <Loader2 className="w-[14px] lg:w-4 h-[14px] lg:h-4" color="white" style={{ animation: 'spin 1s linear infinite' }} />
         ) : (
+          <Download className="w-[14px] lg:w-4 h-[14px] lg:h-4" color="white" />
         )}
       </button>
       {/* Filename Container */}
+      <div className="flex items-center gap-[2px] pr-[4px] lg:pr-[5px] min-h-[29px] lg:min-h-[32px]">
         {/* Hidden span to measure text width */}
         <span
           ref={spanRef}
+          className="absolute invisible whitespace-pre text-[14px] lg:text-[16px] font-normal p-[4px] lg:p-[5px]"
           style={{
+            fontFamily: 'Inter, sans-serif'
           }}
         >
           {filename || 'thumbnail_name'}
           onBlur={() => setIsFocused(false)}
           disabled={isExporting}
           placeholder="thumbnail_name"
+          className="bg-white/5 text-white text-[14px] lg:text-[16px] font-normal outline-none border-none p-[4px] lg:p-[5px] rounded"
           style={{
             fontFamily: 'Inter, sans-serif',
             width: `${inputWidth}px`,
             cursor: isExporting ? 'not-allowed' : 'text',
             opacity: isFocused ? 1 : 0.5,
           }}
           onClick={(e) => e.stopPropagation()}
         />
+        <span className="text-white text-[14px] lg:text-[16px] font-normal" style={{ fontFamily: 'Inter, sans-serif' }}>
           .png
         </span>
       </div>

src/components/Sidebar/Sidebar.tsx CHANGED Viewed

@@ -42,65 +42,65 @@ export default function Sidebar({
         e.stopPropagation();
       }}
     >
-      <div className="sidebar-container bg-[#f8f9fa] border border-[#D7DCE2] rounded-[12px] p-[5px] flex flex-col gap-[15px] w-[87px] relative">
         {/* Layout Button */}
         <button
           onClick={onLayoutClick}
-          className={`flex flex-col items-center gap-[3px] px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'layout'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
-          <div className="w-[32px] h-[32px] flex items-center justify-center">
             <IconLayout selected={activeButton === 'layout'} />
           </div>
-          <p className={`text-[16px] font-normal ${activeButton === 'layout' ? 'text-white' : 'text-[#545865]'}`}>Layout</p>
         </button>
         {/* Huggy Button */}
         <button
           onClick={onHuggyClick}
-          className={`flex flex-col items-center gap-[3px] px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'huggy'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
-          <div className="w-[32px] h-[32px] flex items-center justify-center">
             <IconHuggy />
           </div>
-          <p className={`text-[16px] font-normal ${activeButton === 'huggy' ? 'text-white' : 'text-[#545865]'}`}>Huggy</p>
         </button>
         {/* Image Button */}
         <button
           onClick={onImageClick}
-          className={`flex flex-col items-center gap-[3px] px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'image'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
-          <div className="w-[32px] h-[32px] flex items-center justify-center">
             <IconImage selected={activeButton === 'image'} />
           </div>
-          <p className={`text-[16px] font-normal ${activeButton === 'image' ? 'text-white' : 'text-[#545865]'}`}>Image</p>
         </button>
         {/* Text Button */}
         <button
           onClick={onTextClick}
-          className={`flex flex-col items-center gap-[3px] px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'text'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
-          <div className="w-[32px] h-[32px] flex items-center justify-center">
             <IconText selected={activeButton === 'text'} />
           </div>
-          <p className={`text-[16px] font-normal ${activeButton === 'text' ? 'text-white' : 'text-[#545865]'}`}>Text</p>
         </button>
         {/* Layout Selector - positioned absolutely, aligned with Layout button */}
@@ -118,9 +118,9 @@ export default function Sidebar({
         {/* Text Hint Box - positioned absolutely, aligned with Text button */}
         {activeButton === 'text' && (
-          <div className="text-hint absolute left-[calc(100%+4px)] bottom-[5px] bg-[#3faee6] rounded-[10px] p-[10px] w-[233px]">
-            <p className="text-white text-[16px] font-normal leading-normal">
-              Click anywhere on the canvas to add texts
             </p>
           </div>
         )}

         e.stopPropagation();
       }}
     >
+      <div className="sidebar-container bg-[#f8f9fa] border border-[#D7DCE2] rounded-[12px] p-[5px] flex flex-col gap-[14px] lg:gap-[15px] w-[78px] lg:w-[87px] relative">
         {/* Layout Button */}
         <button
           onClick={onLayoutClick}
+          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'layout'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
+          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
             <IconLayout selected={activeButton === 'layout'} />
           </div>
+          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'layout' ? 'text-white' : 'text-[#545865]'}`}>Layout</p>
         </button>
         {/* Huggy Button */}
         <button
           onClick={onHuggyClick}
+          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'huggy'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
+          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
             <IconHuggy />
           </div>
+          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'huggy' ? 'text-white' : 'text-[#545865]'}`}>Huggy</p>
         </button>
         {/* Image Button */}
         <button
           onClick={onImageClick}
+          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'image'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
+          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
             <IconImage selected={activeButton === 'image'} />
           </div>
+          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'image' ? 'text-white' : 'text-[#545865]'}`}>Image</p>
         </button>
         {/* Text Button */}
         <button
           onClick={onTextClick}
+          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
             activeButton === 'text'
               ? 'bg-[#3faee6]'
               : 'hover:bg-[#e9ecef]'
           }`}
         >
+          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
             <IconText selected={activeButton === 'text'} />
           </div>
+          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'text' ? 'text-white' : 'text-[#545865]'}`}>Text</p>
         </button>
         {/* Layout Selector - positioned absolutely, aligned with Layout button */}
         {/* Text Hint Box - positioned absolutely, aligned with Text button */}
         {activeButton === 'text' && (
+          <div className="text-hint absolute left-[calc(100%+4px)] bottom-[5px] bg-[#3faee6] rounded-[10px] p-[9px] lg:p-[10px] w-max">
+            <p className="text-white text-[14px] lg:text-[16px] font-normal leading-normal">
+              Click anywhere on the<br />canvas to add texts
             </p>
           </div>
         )}

src/components/TextToolbar/ColorPicker.tsx CHANGED Viewed

@@ -201,7 +201,6 @@ export default function ColorPicker({ color, onChange, onClose }: ColorPickerPro
       onChange(pickedColor);
     } catch (error) {
       // User cancelled the eyedropper
-      console.log('Eyedropper cancelled');
     }
   };

       onChange(pickedColor);
     } catch (error) {
       // User cancelled the eyedropper
     }
   };

src/components/TextToolbar/TextToolbar.tsx CHANGED Viewed

@@ -38,6 +38,7 @@ export default function TextToolbar({
   const [showFontDropdown, setShowFontDropdown] = useState(false);
   const [showColorPicker, setShowColorPicker] = useState(false);
   const [dropdownDirection, setDropdownDirection] = useState<'down' | 'up'>('down');
   const dropdownButtonRef = useRef<HTMLButtonElement>(null);
   const fonts: Array<'Inter' | 'IBM Plex Mono' | 'Bison' | 'Source Sans 3'> = ['Inter', 'IBM Plex Mono', 'Bison', 'Source Sans 3'];
@@ -54,6 +55,16 @@ export default function TextToolbar({
   const hasItalic = fontVariations[fontFamily].italic;
   const hasBlack = fontVariations[fontFamily].black;
   // Check dropdown position when it opens
   useEffect(() => {
     if (showFontDropdown && dropdownButtonRef.current) {
@@ -81,6 +92,10 @@ export default function TextToolbar({
   const rightPosition = `calc((100vw - ${scaledWidth}px) / 2)`;
   const bottomPosition = `calc((100vh - ${scaledHeight}px - ${scaledOverhead}px) / 2 - 10px - 44px)`;
   return (
     <div
       className="text-toolbar"
@@ -98,35 +113,38 @@ export default function TextToolbar({
         bottom: bottomPosition,
         zIndex: 100,
         backgroundColor: '#27272A',
-        borderRadius: '8px',
-        padding: '4px',
         boxShadow: '0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.17)',
         transition: 'right 0.15s ease-in-out, bottom 0.15s ease-in-out'
       }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
         {/* Font Family Dropdown */}
         <div style={{ position: 'relative' }}>
             <button
               ref={dropdownButtonRef}
-              onClick={() => setShowFontDropdown(!showFontDropdown)}
               style={{
                 display: 'flex',
                 alignItems: 'center',
-                gap: '20px',
-                padding: '8px',
                 backgroundColor: 'rgba(255, 255, 255, 0.05)',
                 border: 'none',
                 borderRadius: '4px',
                 color: 'white',
-                fontSize: '16px',
                 fontFamily: 'Source Sans Pro, sans-serif',
                 cursor: 'pointer',
                 whiteSpace: 'nowrap'
               }}
             >
               {fontFamily}
-              <ChevronDown size={14} style={{
                 transform: showFontDropdown && dropdownDirection === 'up' ? 'rotate(180deg)' : 'none',
                 transition: 'transform 0.15s ease-in-out'
               }} />
@@ -137,15 +155,15 @@ export default function TextToolbar({
                 style={{
                   position: 'absolute',
                   ...(dropdownDirection === 'down'
-                    ? { top: 'calc(100% + 4px)' }
-                    : { bottom: 'calc(100% + 4px)' }
                   ),
                   left: 0,
                   backgroundColor: '#27272A',
                   border: '1px solid #09090B',
-                  borderRadius: '8px',
-                  padding: '4px',
-                  minWidth: '160px',
                   zIndex: 1000
                 }}
               >
@@ -159,12 +177,12 @@ export default function TextToolbar({
                     style={{
                       display: 'block',
                       width: '100%',
-                      padding: '8px 12px',
                       backgroundColor: fontFamily === font ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
                       border: 'none',
                       borderRadius: '4px',
                       color: 'white',
-                      fontSize: '14px',
                       fontFamily: font,
                       textAlign: 'left',
                       cursor: 'pointer'
@@ -191,7 +209,7 @@ export default function TextToolbar({
           <div
             style={{
               width: '1px',
-              height: '18px',
               backgroundColor: 'rgba(255, 255, 255, 0.2)'
             }}
           />
@@ -199,12 +217,15 @@ export default function TextToolbar({
           {/* Color Picker Button */}
           <div style={{ position: 'relative' }}>
             <button
-              onClick={() => setShowColorPicker(!showColorPicker)}
               style={{
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                padding: '10px',
                 backgroundColor: 'transparent',
                 border: 'none',
                 borderRadius: '99px',
@@ -213,8 +234,8 @@ export default function TextToolbar({
             >
               <div
                 style={{
-                  width: '16px',
-                  height: '16px',
                   borderRadius: '999px',
                   backgroundColor: fill,
                   border: '1px solid #e5e9ed'
@@ -234,14 +255,18 @@ export default function TextToolbar({
           {/* Bold Button */}
           <button
-            onClick={hasBold ? onBoldToggle : undefined}
             disabled={!hasBold}
             style={{
               position: 'relative',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              padding: '8px',
               backgroundColor: bold || fontWeight === 'black' ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
               border: 'none',
               borderRadius: '4px',
@@ -250,15 +275,15 @@ export default function TextToolbar({
               opacity: hasBold ? 1 : 0.3
             }}
           >
-            <Bold size={20} />
             {/* Show indicator for BLACK weight */}
             {hasBlack && fontWeight === 'black' && (
               <div style={{
                 position: 'absolute',
                 bottom: '2px',
                 right: '2px',
-                width: '6px',
-                height: '6px',
                 borderRadius: '50%',
                 backgroundColor: '#3faee6'
               }} />
@@ -267,13 +292,17 @@ export default function TextToolbar({
           {/* Italic Button */}
           <button
-            onClick={hasItalic ? onItalicToggle : undefined}
             disabled={!hasItalic}
             style={{
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              padding: '8px',
               backgroundColor: italic ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
               border: 'none',
               borderRadius: '4px',
@@ -282,7 +311,7 @@ export default function TextToolbar({
               opacity: hasItalic ? 1 : 0.3
             }}
           >
-            <Italic size={20} />
           </button>
       </div>
     </div>

   const [showFontDropdown, setShowFontDropdown] = useState(false);
   const [showColorPicker, setShowColorPicker] = useState(false);
   const [dropdownDirection, setDropdownDirection] = useState<'down' | 'up'>('down');
+  const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024);
   const dropdownButtonRef = useRef<HTMLButtonElement>(null);
   const fonts: Array<'Inter' | 'IBM Plex Mono' | 'Bison' | 'Source Sans 3'> = ['Inter', 'IBM Plex Mono', 'Bison', 'Source Sans 3'];
   const hasItalic = fontVariations[fontFamily].italic;
   const hasBlack = fontVariations[fontFamily].black;
+  // Handle window resize for responsive behavior
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLargeScreen(window.innerWidth >= 1024);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
   // Check dropdown position when it opens
   useEffect(() => {
     if (showFontDropdown && dropdownButtonRef.current) {
   const rightPosition = `calc((100vw - ${scaledWidth}px) / 2)`;
   const bottomPosition = `calc((100vh - ${scaledHeight}px - ${scaledOverhead}px) / 2 - 10px - 44px)`;
+  // Responsive sizing values
+  const toolbarPadding = isLargeScreen ? '4px' : '3.6px';
+  const buttonGap = isLargeScreen ? '4px' : '3.6px';
   return (
     <div
       className="text-toolbar"
         bottom: bottomPosition,
         zIndex: 100,
         backgroundColor: '#27272A',
+        borderRadius: isLargeScreen ? '8px' : '7px',
+        padding: toolbarPadding,
         boxShadow: '0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.17)',
         transition: 'right 0.15s ease-in-out, bottom 0.15s ease-in-out'
       }}
     >
+      <div style={{ display: 'flex', alignItems: 'center', gap: buttonGap }}>
         {/* Font Family Dropdown */}
         <div style={{ position: 'relative' }}>
             <button
               ref={dropdownButtonRef}
+              onClick={() => {
+                setShowFontDropdown(!showFontDropdown);
+                setShowColorPicker(false);
+              }}
               style={{
                 display: 'flex',
                 alignItems: 'center',
+                gap: isLargeScreen ? '20px' : '18px',
+                padding: isLargeScreen ? '8px' : '7px',
                 backgroundColor: 'rgba(255, 255, 255, 0.05)',
                 border: 'none',
                 borderRadius: '4px',
                 color: 'white',
+                fontSize: isLargeScreen ? '16px' : '14px',
                 fontFamily: 'Source Sans Pro, sans-serif',
                 cursor: 'pointer',
                 whiteSpace: 'nowrap'
               }}
             >
               {fontFamily}
+              <ChevronDown size={isLargeScreen ? 14 : 13} style={{
                 transform: showFontDropdown && dropdownDirection === 'up' ? 'rotate(180deg)' : 'none',
                 transition: 'transform 0.15s ease-in-out'
               }} />
                 style={{
                   position: 'absolute',
                   ...(dropdownDirection === 'down'
+                    ? { top: isLargeScreen ? 'calc(100% + 4px)' : 'calc(100% + 3.6px)' }
+                    : { bottom: isLargeScreen ? 'calc(100% + 4px)' : 'calc(100% + 3.6px)' }
                   ),
                   left: 0,
                   backgroundColor: '#27272A',
                   border: '1px solid #09090B',
+                  borderRadius: isLargeScreen ? '8px' : '7px',
+                  padding: isLargeScreen ? '4px' : '3.6px',
+                  minWidth: isLargeScreen ? '160px' : '144px',
                   zIndex: 1000
                 }}
               >
                     style={{
                       display: 'block',
                       width: '100%',
+                      padding: isLargeScreen ? '8px 12px' : '7px 11px',
                       backgroundColor: fontFamily === font ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
                       border: 'none',
                       borderRadius: '4px',
                       color: 'white',
+                      fontSize: isLargeScreen ? '14px' : '13px',
                       fontFamily: font,
                       textAlign: 'left',
                       cursor: 'pointer'
           <div
             style={{
               width: '1px',
+              height: isLargeScreen ? '18px' : '16px',
               backgroundColor: 'rgba(255, 255, 255, 0.2)'
             }}
           />
           {/* Color Picker Button */}
           <div style={{ position: 'relative' }}>
             <button
+              onClick={() => {
+                setShowColorPicker(!showColorPicker);
+                setShowFontDropdown(false);
+              }}
               style={{
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                padding: isLargeScreen ? '10px' : '9px',
                 backgroundColor: 'transparent',
                 border: 'none',
                 borderRadius: '99px',
             >
               <div
                 style={{
+                  width: isLargeScreen ? '16px' : '14px',
+                  height: isLargeScreen ? '16px' : '14px',
                   borderRadius: '999px',
                   backgroundColor: fill,
                   border: '1px solid #e5e9ed'
           {/* Bold Button */}
           <button
+            onClick={hasBold ? () => {
+              onBoldToggle();
+              setShowFontDropdown(false);
+              setShowColorPicker(false);
+            } : undefined}
             disabled={!hasBold}
             style={{
               position: 'relative',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: isLargeScreen ? '8px' : '7px',
               backgroundColor: bold || fontWeight === 'black' ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
               border: 'none',
               borderRadius: '4px',
               opacity: hasBold ? 1 : 0.3
             }}
           >
+            <Bold size={isLargeScreen ? 20 : 18} />
             {/* Show indicator for BLACK weight */}
             {hasBlack && fontWeight === 'black' && (
               <div style={{
                 position: 'absolute',
                 bottom: '2px',
                 right: '2px',
+                width: isLargeScreen ? '6px' : '5px',
+                height: isLargeScreen ? '6px' : '5px',
                 borderRadius: '50%',
                 backgroundColor: '#3faee6'
               }} />
           {/* Italic Button */}
           <button
+            onClick={hasItalic ? () => {
+              onItalicToggle();
+              setShowFontDropdown(false);
+              setShowColorPicker(false);
+            } : undefined}
             disabled={!hasItalic}
             style={{
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: isLargeScreen ? '8px' : '7px',
               backgroundColor: italic ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
               border: 'none',
               borderRadius: '4px',
               opacity: hasItalic ? 1 : 0.3
             }}
           >
+            <Italic size={isLargeScreen ? 20 : 18} />
           </button>
       </div>
     </div>

src/index.css CHANGED Viewed

@@ -4,10 +4,10 @@
 @font-face {
   font-family: 'Bison';
-  src: url('/fonts/Bison-Bold(PersonalUse).ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
-  font-display: block;
 }
 body {

 @font-face {
   font-family: 'Bison';
+  src: url('/fonts/Bison-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
+  font-display: swap;
 }
 body {