Fix viewport min/max button in Safari

CHANGELOG.unreleased.md

@@ -52,6 +52,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fixed regression in styling of segment and skeleton tree tab. [#8307](https://github.com/scalableminds/webknossos/pull/8307)
 - Fixed the template for neuron inferral using a custom workflow. [#8312](https://github.com/scalableminds/webknossos/pull/8312)
 - Fixed that the list of processing jobs crashed for deleted job types. [#8300](https://github.com/scalableminds/webknossos/pull/8300)
+- Fixed an issue where you could not maximize or reposition the 3D/XZ viewport in Safari. [#8337](https://github.com/scalableminds/webknossos/pull/8337)
 
 ### Removed
 - Removed support for HTTP API versions 3 and 4. [#8075](https://github.com/scalableminds/webknossos/pull/8075)

frontend/stylesheets/flex_layout_overwrites.less

@@ -5,6 +5,7 @@
   background-color: transparent;
   color: unset;
 }
+
 .flexlayout__tab_border,
 .flexlayout__tabset_tabbar_outer_top,
 .flexlayout__tabset-selected {
@@ -18,6 +19,7 @@
 .flexlayout__border_left {
   border-right: none;
 }
+
 .flexlayout__border_right {
   border-left: none;
 }
@@ -26,19 +28,23 @@
   border: none !important;
 }
 
+// The horizontal/vertical splitter is the UI element that is used to resize the borders between the tabs/viewports. 
 .flexlayout__splitter:hover,
 .flexlayout__splitter_drag {
   background-color: var(--ant-color-border-secondary)
 }
+
 .flexlayout__splitter {
   z-index: 21;
   background-color: var(--ant-color-border);
+
   &::before {
     content: "";
     background-color: transparent;
   }
 }
 
+// We configure the splitter to be almost invisible in code (just 1px) and use CSS transparent ::before pseudo to increase to mouse click/drag target instead. 
 .flexlayout__splitter_vert::before {
   width: 11px;
   display: inline-block;
@@ -56,8 +62,8 @@
   top: -15px;
 }
 
-.flexlayout__tab_button_content {
-  // On Safari, this ensures that the button is easily clickable
+.flexlayout__tabset_tabbar_outer {
+  // On Safari, this ensures that the "maximize/minimize viewport"-button is easily clickable and a tab header/name can be grabbed for repositioning. 
   // (otherwise, the resizer becomes the default target for some reason).
   z-index: 100;
 }
@@ -87,26 +93,31 @@
   font-size: 14px;
   font-weight: 400;
   font-family: @font-family;
-  
+
   &:hover {
     cursor: move;
   }
+
   background-color: var(--ant-color-bg-base);
 
   .flexlayout__tab_button_content {
     background-color: var(--ant-color-bg-base);
     color: var(--ant-color-text-secondary);
     border-bottom: 1px solid transparent;
   }
+
   &.flexlayout__tab_button--selected {
     background-color: var(--ant-color-bg-base);
+
     .flexlayout__tab_button_content {
       background-color: var(--ant-color-bg-base);
       color: var(--ant-color-link);
     }
   }
+
   &:hover {
     background-color: var(--ant-color-bg-base);
+
     .flexlayout__tab_button_content {
       background-color: var(--ant-color-bg-base);
       color: var(--ant-color-link);
@@ -136,7 +147,8 @@
 .hide_first_splitter_border {
   pointer-events: none;
 }
+
 // This re-enables all pointer event for all other border splitters that are not the first (left most).
-.hide_first_splitter_border ~ .hide_first_splitter_border {
+.hide_first_splitter_border~.hide_first_splitter_border {
   pointer-events: all;
-}
+}