chore: update github badges layout for small screen

Author: rezigned

.github/workflows/github-pages.yml

@@ -3,7 +3,7 @@ name: Release to Github Pages
 
 on:
   push:
-    branches: [main]
+    branches: [main, deploy-github-pages]
     paths:
       - 'platforms/web/**'
       - '.github/workflows/github-pages.yml'

platforms/web/src/components/graph_view.rs

@@ -194,7 +194,7 @@ impl GraphView {
                                 {{ selector: '.current', style: {{ 'background-color': gt.activeNodeColor }} }},
                                 {{ selector: '.previous', style: {{ 'background-color': gt.defaultNodeColor }} }},
                                 {{ selector: '.halt', style: {{ 'background-color': gt.defaultNodeColor }} }},
-                                {{ selector: 'edge', style: {{ 'width': 2, 'line-color': gt.edgeColor, 'target-arrow-color': gt.edgeColor, 'target-arrow-shape': 'triangle', 'curve-style': 'bezier', 'font-size': '12px', 'text-background-color': 'white', 'text-background-opacity': 0.8 }} }},
+                                {{ selector: 'edge', style: {{ 'width': 2, 'line-color': gt.edgeColor, 'target-arrow-color': gt.edgeColor, 'target-arrow-shape': 'triangle', 'curve-style': 'bezier', 'font-family': '"Fira Code", monospace', 'font-size': '12px', 'color': '#444', 'text-background-color': '#F5F7FA', 'text-background-opacity': 0.8 }} }},
                                 {{ selector: 'edge[label]', style: {{ 'label': 'data(label)', 'text-wrap': 'wrap', 'text-max-width': '120px' }} }}
                             ],
                             layout: {{ name: 'circle', padding: 30 }},
@@ -313,6 +313,6 @@ impl GraphView {
             .collect::<Vec<&str>>()
             .join(",");
 
-        format!("{}/{}/{}", read_str, write_str, dir_str)
+        format!("{} -> {}, {}", read_str, write_str, dir_str)
     }
 }

platforms/web/styles.css

@@ -668,17 +668,16 @@ body {
     .app {
         padding: 1.5rem;
     }
+    body {
+      padding-top: 1rem;
+    }
+    body .socials {
+      position: relative;
+      margin: 0 1rem 0.2rem;
+    }
     .main-layout, .left-panel, .right-panel {
         gap: 1.5rem;
     }
-    .card, .program-selector-section, .editor-section, .tape-view,
-.state-display,
-.control-panel,
-.graph-view,
-.multi-tape-view,
-.status-section {
-    /* These styles are now handled by .section */
-}
     .btn {
         padding: 0.7rem 1.4rem;
         font-size: 0.9rem;
@@ -687,10 +686,12 @@ body {
 
 .socials {
     position: absolute;
-    top: 1.5rem;
-    right: 1.5rem;
+    right: 0;
+    top: 0;
     display: flex;
+    justify-content: flex-end;
     gap: 5px;
+    margin: 1.5rem 1.5rem 0 0;
     z-index: 10;
 }
 /* Share Button Styles */

platforms/web/turing-editor.js

@@ -13,6 +13,7 @@ window.addEventListener("load", () => {
     nodeTextColor: "white",
     edgeTextBackgroundColor: "white",
   };
+
   console.log("Graph theme initialized");
 
   // Initialize CodeMirror-based syntax highlighting