style(terminal): Some touch selection handle enhancements (#1611)

Author: peasneovoyager2banana2

src/components/terminal/terminalTouchSelection.css

@@ -24,16 +24,18 @@
 	z-index: 101;
 	cursor: grab;
 	transition: transform 0.15s ease;
+	border-radius: 50% 50% 50% 0;
 }
 
 .terminal-selection-handle:active {
 	cursor: grabbing;
 }
 
-.terminal-selection-handle-start,
+.terminal-selection-handle-start {
+	transform: rotate(180deg) translateX(87%);
+}
 .terminal-selection-handle-end {
-	transform: rotate(135deg);
-	border-radius: 50% 50% 50% 0;
+	transform: rotate(90deg) translateX(-13%);
 }
 
 .terminal-context-menu {

src/components/terminal/terminalTouchSelection.js

@@ -88,13 +88,13 @@ export default class TerminalTouchSelection {
 	createHandles() {
 		this.startHandle = this.createHandle("start");
 		this.startHandle.style.cssText += `
-      transform: rotate(135deg);
+      transform: rotate(180deg) translateX(87%);
       border-radius: 50% 50% 50% 0;
     `;
 
 		this.endHandle = this.createHandle("end");
 		this.endHandle.style.cssText += `
-      transform: rotate(135deg);
+      transform: rotate(90deg) translateY(-13%);
       border-radius: 50% 50% 50% 0;
     `;
 
@@ -735,7 +735,7 @@ export default class TerminalTouchSelection {
 		// Show/hide start handle at logical start position
 		if (startPos) {
 			this.startHandle.style.display = "block";
-			this.startHandle.style.left = `${startPos.x - this.options.handleSize / 2 - 0.1}px`;
+			this.startHandle.style.left = `${startPos.x}px`;
 			this.startHandle.style.top = `${startPos.y + this.cellDimensions.height + 4}px`;
 		} else {
 			this.startHandle.style.display = "none";
@@ -744,7 +744,7 @@ export default class TerminalTouchSelection {
 		// Show/hide end handle at logical end position
 		if (endPos) {
 			this.endHandle.style.display = "block";
-			this.endHandle.style.left = `${endPos.x + this.cellDimensions.width - this.options.handleSize / 2 - 1}px`;
+			this.endHandle.style.left = `${endPos.x + this.cellDimensions.width}px`;
 			this.endHandle.style.top = `${endPos.y + this.cellDimensions.height + 4}px`;
 		} else {
 			this.endHandle.style.display = "none";