Update app_enhanced.py

app_enhanced.py

@@ -543,13 +543,14 @@ class EnhancedComicGenerator:
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
         .speech-bubble textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #4CAF50; background: rgba(255,255,255,0.95); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
         
-        /* <<< MODIFICATION START: New Robust Bordered Bubble CSS >>> */
+        /* <<< FIXED BUBBLE CSS WITH DYNAMIC TAIL SLIDER >>> */
         .speech-bubble.speech {
             background: var(--bubble-fill-color, white);
             color: var(--bubble-text-color, #333);
             border: 2px solid var(--bubble-border-color, #333);
             border-radius: 10px;
             padding: 0;
+            --tail-pos: 50%; /* Default centered tail */
         }
 
         .speech-bubble.speech:after, .speech-bubble.speech:before {
@@ -557,16 +558,16 @@ class EnhancedComicGenerator:
             position: absolute;
             display: block;
             width: 0;
+            pointer-events: none;
         }
 
-        /* 4-WAY TAIL ROTATION CLASSES */
-        /* BOTTOM */
+        /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:after {
             border-style: solid;
             border-width: 15px 15px 0 0;
             border-color: var(--bubble-fill-color, white) transparent transparent transparent;
             bottom: -15px;
-            left: 50%;
+            left: var(--tail-pos);
             transform: translateX(-50%);
             z-index: 1;
         }
@@ -575,18 +576,18 @@ class EnhancedComicGenerator:
             border-width: 17px 17px 0 0;
             border-color: var(--bubble-border-color, #333) transparent transparent transparent;
             bottom: -19px;
-            left: 50%;
+            left: var(--tail-pos);
             transform: translateX(-50%);
             z-index: 0;
         }
 
-        /* TOP */
+        /* TOP TAIL */
         .speech-bubble.speech.tail-top:after {
             border-style: solid;
             border-width: 0 15px 15px 0;
             border-color: transparent var(--bubble-fill-color, white) transparent transparent;
             top: -15px;
-            left: 50%;
+            left: var(--tail-pos);
             transform: translateX(-50%) rotate(180deg);
             z-index: 1;
         }
@@ -595,17 +596,17 @@ class EnhancedComicGenerator:
             border-width: 0 17px 17px 0;
             border-color: transparent var(--bubble-border-color, #333) transparent transparent;
             top: -19px;
-            left: 50%;
+            left: var(--tail-pos);
             transform: translateX(-50%) rotate(180deg);
             z-index: 0;
         }
 
-        /* RIGHT */
-         .speech-bubble.speech.tail-right:after {
+        /* RIGHT TAIL */
+        .speech-bubble.speech.tail-right:after {
             border-style: solid;
             border-width: 15px 15px 0 0;
             border-color: var(--bubble-fill-color, white) transparent transparent transparent;
-            top: 50%;
+            top: var(--tail-pos);
             right: -15px;
             transform: translateY(-50%) rotate(90deg);
             z-index: 1;
@@ -614,18 +615,18 @@ class EnhancedComicGenerator:
             border-style: solid;
             border-width: 17px 17px 0 0;
             border-color: var(--bubble-border-color, #333) transparent transparent transparent;
-            top: 50%;
+            top: var(--tail-pos);
             right: -19px;
             transform: translateY(-50%) rotate(90deg);
             z-index: 0;
         }
 
-        /* LEFT */
+        /* LEFT TAIL */
         .speech-bubble.speech.tail-left:after {
             border-style: solid;
             border-width: 15px 15px 0 0;
             border-color: var(--bubble-fill-color, white) transparent transparent transparent;
-            top: 50%;
+            top: var(--tail-pos);
             left: -15px;
             transform: translateY(-50%) rotate(-90deg);
             z-index: 1;
@@ -634,12 +635,11 @@ class EnhancedComicGenerator:
             border-style: solid;
             border-width: 17px 17px 0 0;
             border-color: var(--bubble-border-color, #333) transparent transparent transparent;
-            top: 50%;
+            top: var(--tail-pos);
             left: -19px;
             transform: translateY(-50%) rotate(-90deg);
             z-index: 0;
         }
-        /* <<< MODIFICATION END >>> */
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
         .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; width: 180px; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
@@ -676,6 +676,9 @@ class EnhancedComicGenerator:
         .color-picker-grid div { text-align: center; }
         .color-picker-grid label { font-size: 11px; }
         .color-picker-grid input[type="color"] { height: 25px; padding: 2px; }
+        
+        .slider-container { display: flex; align-items: center; gap: 5px; margin-top: 5px;}
+        .slider-container label { font-size: 11px; min-width: 50px;}
     </style>
 </head>
 <body>
@@ -711,8 +714,12 @@ class EnhancedComicGenerator:
             <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
         <div class="control-group" id="tail-controls" style="display: none;">
-            <label>Tail Controls</label>
-            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
+            <label>Tail Adjustment</label>
+            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Side</button>
+            <div class="slider-container">
+                <label>Pos:</label>
+                <input type="range" id="tail-slider" min="10" max="90" value="50" oninput="slideTail(this.value)">
+            </div>
         </div>
         <div class="control-group">
             <label>Panel Tools (Select Panel):</label>
@@ -902,6 +909,11 @@ class EnhancedComicGenerator:
                  alert("Tail rotation is only available for Speech and Thought bubbles.");
             }
         }
+
+        function slideTail(value) {
+            if(!currentlySelectedBubble) return;
+            currentlySelectedBubble.style.setProperty('--tail-pos', value + '%');
+        }
         
         function selectPanel(panel) {
             document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected'));
@@ -915,6 +927,7 @@ class EnhancedComicGenerator:
             currentlySelectedBubble = bubble;
             const bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select'];
             const tailControls = document.getElementById('tail-controls');
+            const tailSlider = document.getElementById('tail-slider');
 
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
@@ -934,6 +947,14 @@ class EnhancedComicGenerator:
                 document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
                 document.getElementById('font-select').value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
 
+                // Read current tail pos
+                const currentTailPos = styles.getPropertyValue('--tail-pos').trim();
+                if(currentTailPos.includes('%')) {
+                    tailSlider.value = parseInt(currentTailPos);
+                } else {
+                    tailSlider.value = 50;
+                }
+
                 document.getElementById('zoom-slider').disabled = true;
                 bubbleControls.forEach(id => document.getElementById(id).disabled = false);