Enhance play/pause button with gray circle background

frontend/src/components/shared/buttons/action-button.tsx

@@ -23,7 +23,7 @@ export function ActionButton({
         className="relative overflow-visible cursor-default hover:cursor-pointer group disabled:cursor-not-allowed transition-all duration-300 ease-in-out"
         type="button"
       >
-        <span className="relative group-hover:filter group-hover:drop-shadow-[0_0_5px_rgba(255,64,0,0.4)]">
+        <span className="relative flex items-center justify-center w-8 h-8 bg-gray-200 rounded-full group-hover:filter group-hover:drop-shadow-[0_0_5px_rgba(255,64,0,0.4)]">
           {children}
         </span>
         <span className="absolute -inset-[5px] border-2 border-red-400/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out" />

frontend/vite.config.ts

@@ -31,6 +31,8 @@ export default defineConfig(({ mode }) => {
     ],
     server: {
       port: FE_PORT,
+      host: "0.0.0.0",
+      allowedHosts: true,
       proxy: {
         "/api": {
           target: API_URL,