Layout fixes

Author: niyamax

src/components/GitSequencer.css

@@ -270,15 +270,15 @@
     margin-top: 0.25rem;
     margin-left: 1rem;
     font-size: 0.9rem;
-    min-height: 1.4em;
+    min-height: 3rem;
 }
 
 .status-msg .dim {
     color: var(--text-dim);
 }
 
 .status-msg .hint-tip {
-    color: var(--text-dim);
+    color: #555555;
     font-size: 0.85rem;
     line-height: 1.5rem;
     padding-left: 0.5rem;
@@ -502,7 +502,11 @@
         overflow-x: auto;
         max-width: 100%;
         scrollbar-width: thin;
-        scrollbar-color: var(--accent) var(--bg);
+        scrollbar-color: #555555 var(--bg);
+    }
+
+    .graph-section.no-data {
+        overflow-x: hidden;
     }
 
     .graph-section::-webkit-scrollbar {
@@ -514,7 +518,7 @@
     }
 
     .graph-section::-webkit-scrollbar-thumb {
-        background-color: var(--accent);
+        background-color: #888888;
         border-radius: 3px;
     }
 

src/components/GitSequencer.jsx

@@ -324,7 +324,7 @@ const GitSequencer = () => {
         const titleFont = `bold ${legendTitleSize}px monospace`;
         const versionFont = `${legendVersionSize}px monospace`;
         ctx.font = titleFont;
-        const titleText = 'GitHub Music';
+        const titleText = 'GitMusic';
         const titleWidth = ctx.measureText(titleText).width;
         ctx.font = versionFont;
         const versionText = 'v1.0.0';
@@ -735,16 +735,16 @@ const GitSequencer = () => {
                         <span className="success">✓ loaded {data.weeks.length} weeks</span>
                     ) : (
                         <>
-                            <div className="hint-tip">└─ enter git username (loads one with higher git contributions)</div>
-                            <div className="hint-tip">└─ use -p github|gitlab to choose platform</div>
+                            <div className="hint-tip">└─ default: most active contributions</div>
+                            <div className="hint-tip">└─ use -p github|gitlab to force platform</div>
                         </>
                     )
                     }
                 </div>
             </div>
 
             {/* Contribution Graph */}
-            <div className="graph-section" ref={graphSectionRef}>
+            <div className={`graph-section ${!data || isAnimating || error ? 'no-data' : ''}`} ref={graphSectionRef}>
                 {data && !isAnimating && !error ? (
                     <div className="graph-grid">
                         {data.weeks.map((week, wIndex) => (

src/hooks/useSequencer.js

@@ -60,6 +60,7 @@ export function useSequencer(audioEngine) {
         if (!data) return;
 
         await Tone.start();
+        Tone.context.lookAhead = 0.1; // Increase lookahead for mobile stability
 
         const cols = data.weeks.map((_, i) => i);
 
@@ -104,7 +105,8 @@ export function useSequencer(audioEngine) {
             let weekDensity = 0;
             week.days.forEach(d => weekDensity += d.level);
 
-            if (weekDensity > 10) {
+            // Only sample if extremely dense (prevent "wall of sound" while keeping most notes)
+            if (weekDensity > 25) {
                 // Busy week: random sampling
                 const activeDays = week.days
                     .map((d, i) => ({ day: d, index: i }))
@@ -142,7 +144,7 @@ export function useSequencer(audioEngine) {
                     setActiveNotes(playingIndices);
                 }, time);
             }
-        }, cols, "8n").start(0);
+        }, cols, "8n").start("0:0:0");
 
         // Adaptive BPM
         let totalContribs = 0;
@@ -159,7 +161,7 @@ export function useSequencer(audioEngine) {
     const stop = useCallback(() => {
         Tone.Transport.stop();
         Tone.Transport.cancel(); // Clear all scheduled events
-        Tone.Transport.position = 0; // Reset position
+        Tone.Transport.position = "0:0:0"; // Reset position safely
         if (sequenceRef.current) {
             sequenceRef.current.stop();
             sequenceRef.current.dispose();