Fix small screens

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -20,21 +20,21 @@ const TopButton = ({
     className={`flex bg-gray-200 h-10 justify-center items-center px-4 rounded ${className}`}
   >
     {children}
-    {name}
+    <span className="hidden md:block ml-2">{name}</span>
   </button>
 )
 
 const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
   return (
     <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center">
-      <div className="bg-ch-gray-700 pr-48 h-full"></div>
+      <div className="bg-ch-gray-700 md:pr-48 h-full"></div>
       <div className="text-gray-200 flex gap-4 mr-4">
         <TopButton
           className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
           onClick={handleRender}
           name="Preview"
         >
-          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500 mr-2" />
+          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500" />
         </TopButton>
 
         <Popover className="relative outline-none w-full h-full">
@@ -48,7 +48,7 @@ const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
                   >
                     <Svg
                       name="share"
-                      className="w-6 h-6 text-ch-purple-500 mr-2 mt-1"
+                      className="w-6 h-6 text-ch-purple-500 mt-1"
                     />
                   </TopButton>
                 </Popover.Button>