Update artifacts.py

artifacts.py

@@ -38,7 +38,7 @@ class MiddlewareHTMLGenerator:
         .content-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background-color: transparent; }
         .resize-handle { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: se-resize; }
         .responsive-controls { display: flex; justify-content: center; margin-bottom: 10px; margin-top: 15px; }
-        .device-button { margin: 0 5px; padding: 5px 10px; background-color: transparent; color: #ffffff; border: 1px solid #ffffff; cursor: pointer; border-radius: 4px; transition: background-color 0.3s, color 0.3s; }
+        .device-button { margin: 0 4px; padding: 5px 7px; background-color: transparent; color: #ffffff; border: 1px solid #ffffff; cursor: pointer; border-radius: 4px; transition: background-color 0.3s, color 0.3s; }
         .device-button:hover { background-color: rgba(255, 255, 255, 0.1); }
         .device-button.active { background-color: rgba(255, 255, 255, 0.2); font-weight: bold; }
         .switch { position: relative; display: inline-block; width: 60px; height: 24px; }
@@ -408,14 +408,14 @@ class MiddlewareHTMLGenerator:
             <div class='content-item render-view' data-artifact="{i+1}">
                 <h2>HTML Content {i+1}</h2>
                 <div class="responsive-controls">
-                    <button class="device-button" data-width="320px">Mobile</button>
+                    <button class="device-button" data-width="300px">Mobile</button>
                     <button class="device-button" data-width="768px">Tablet</button>
                     <button class="device-button active" data-width="100%">Desktop</button>
                     <!-- CodePen Button -->
-                    <div class="codepen-button-container" style="float: right; margin-left: 30px;">
+                    <div class="codepen-button-container" style="float: right; margin-left: 17px;">
                         <form action="https://codepen.io/pen/define" method="POST" target="_blank">
                             <input type="hidden" name="data" value='{JSONstring}'>
-                            <input type="submit" value="Edit on CodePen" class="codepen-button" style="background-color: #2196F3; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;"> 
+                            <input type="submit" value="Edit on CodePen" class="codepen-button" style="background-color: #2196F3; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;"> 
                         </form>
                     </div>
                 </div>