fix powerline tab chevron shape - use clip-path instead of arrow

Author: xcutiboo

src/components/live-preview/terminal-window.component.ts

@@ -109,7 +109,7 @@ import { FontPresetsService } from '../../services/font-presets.service';
           }
           @case ('powerline') {
             @for (tab of tabs; track tab.name; let i = $index) {
-              <div class="relative px-3 py-1.5 text-xs whitespace-nowrap flex items-center powerline-tab" [ngStyle]="powerlineTabStyles(i === 0)">{{ tab.name }}</div>
+              <div class="relative px-4 py-1.5 text-xs whitespace-nowrap flex items-center powerline-tab" [ngStyle]="powerlineTabStyles(i === 0)">{{ tab.name }}</div>
             }
             <div class="flex-1" [style.background]="tabBarBg()"></div>
           }
@@ -129,8 +129,8 @@ import { FontPresetsService } from '../../services/font-presets.service';
     .animate-blink { animation: blink 1s step-end infinite; }
     .slanted-tab { clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); padding-left: 16px; padding-right: 16px; margin-right: -4px; }
     .slanted-tab:first-child { clip-path: polygon(0% 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); padding-left: 12px; }
-    .powerline-tab { padding-right: 16px; }
-    .powerline-tab::after { content: ''; position: absolute; right: -8px; top: 0; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 8px solid var(--tab-bg); z-index: 1; }
+    .powerline-tab { clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%); padding-left: 20px; padding-right: 14px; margin-left: -10px; }
+    .powerline-tab:first-child { clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%); padding-left: 12px; margin-left: 0; }
   `]
 })
 export class TerminalWindowComponent {