gtk: use wide handle for GtkPaned

Improves ghostty-org#3020.

Ensures that the drag handle for the pane separator never overlaps pane
content.

See recommendation in upstream Gtk issue:
https://gitlab.gnome.org/GNOME/gtk/-/issues/4484#note_2362002

Also add WIP CSS to style the pane handle with a single centered 1px
line, rather than two 1px borders.

src/apprt/gtk/Split.zig

@@ -114,6 +114,12 @@ pub fn init(
     // Keep a long-lived reference, which we unref in destroy.
     paned.ref();
 
+    // Ensure that the drag handle for split panes never overlaps
+    // pane content. (#3020)
+    // See recommendation in upstream Gtk issue:
+    // https://gitlab.gnome.org/GNOME/gtk/-/issues/4484#note_2362002
+    paned.setWideHandle(@intFromBool(true));
+
     // Update all of our containers to point to the right place.
     // The split has to point to where the sibling pointed to because
     // we're inheriting its parent. The sibling points to its location

src/apprt/gtk/style.css

@@ -63,3 +63,38 @@ window.ssd.no-border-radius {
   margin: 0;
   padding: 0;
 }
+
+/* By default, a GtkPaned wide handle has a 1px border at the left
+* and right of the 5px wide pane resize handle. This border is created
+* with `box-shadow`. Instead, we want a single 1px line exactly in the
+* center of the pane resize handle.
+*
+* To achieve this, we reset box-shadow to `none`, and create a 1px
+* wide linear-gradient of the appropriate color in the center of
+* the pane resize handle.
+*
+* Attribution: https://stackoverflow.com/a/53551089
+*
+* We need to do this separately for vertical and horizontal panes.
+*/
+.terminal-window .notebook paned.vertical > separator {
+  box-shadow: none;
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0.15)
+  );
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.terminal-window .notebook paned.horizontal > separator {
+  box-shadow: none;
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0.15)
+  );
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}