Unify column classes and toggling for split & full screen

app/assets/stylesheets/content/work_packages/single_view/_single_view.sass

@@ -202,22 +202,13 @@ i
 
 // Implement two column layout for WP full screen view
 @media screen and (min-width: 92rem), print
-  .action-show .attributes-group,
-  .full-create .attributes-group
+  .action-show .-can-have-columns,
+  .full-create .-can-have-columns
+
     .-columns-2
-      column-count: 2
+      @include two-column-layout
       column-gap: 3rem
 
-      .attributes-key-value
-        -webkit-column-break-inside: avoid
-        page-break-inside: avoid
-        break-inside: avoid
-        overflow: hidden
-        // For some reason chrome seems to treat a two column layout
-        // as if it would result in showing the backside of this element.
-        // This leads to input and select elements not showing their values.
-        backface-visibility: visible
-
       @supports (column-span: all)
         // Let some elements still span both columns
         .attributes-key-value.-span-all-columns

app/assets/stylesheets/layout/work_packages/_details_view.sass

@@ -42,17 +42,9 @@ body.action-create
     // Will eventually be overridden by the resizer
     flex-basis: 580px
 
-    &.-columns-2
+    &.-can-have-columns
       .-columns-2
-        column-count: 2
-        column-gap: 4rem
-
-        .attributes-key-value
-          -webkit-column-break-inside: avoid
-          page-break-inside: avoid
-          break-inside: avoid
-          overflow: hidden
-          backface-visibility: visible
+        @include two-column-layout
 
 .work-packages--details
   height: 100%

app/assets/stylesheets/openproject/_mixins.sass

@@ -140,3 +140,17 @@
   &::-webkit-scrollbar-thumb
     background: #ddd
     visibility: visible
+
+@mixin two-column-layout
+  column-count: 2
+  column-gap: 4rem
+
+  .attributes-key-value
+    -webkit-column-break-inside: avoid
+    page-break-inside: avoid
+    break-inside: avoid
+    overflow: hidden
+    // For some reason chrome seems to treat a two column layout
+    // as if it would result in showing the backside of this element.
+    // This leads to input and select elements not showing their values.
+    backface-visibility: visible

frontend/src/app/components/resizer/wp-resizer.component.ts

@@ -87,11 +87,11 @@ export class WpResizerDirective implements OnInit, OnDestroy {
         untilComponentDestroyed(this)
       )
       .subscribe( changeData => {
-        jQuery('.-can-have-columns').toggleClass('-columns-2', jQuery('.work-packages-full-view--split-left').width()! > 750);
+        this.toggleFullscreenColumns();
       });
     let that = this;
     jQuery(window).resize(function() {
-      jQuery('.-can-have-columns').toggleClass('-columns-2', jQuery('.work-packages-full-view--split-left').width()! > 750);
+      that.toggleFullscreenColumns();
     });
   }
 
@@ -191,11 +191,22 @@ export class WpResizerDirective implements OnInit, OnDestroy {
   private applyColumnLayout(element:HTMLElement, newWidth:number) {
     // Apply two column layout in fullscreen view of a workpackage
     if (element === jQuery('.work-packages-full-view--split-right')[0]) {
-      jQuery('.-can-have-columns').toggleClass('-columns-2', jQuery('.work-packages-full-view--split-left').width()! > 750);
+      this.toggleFullscreenColumns();
     }
     // Apply two column layout when details view of wp is open
     else {
-      element.classList.toggle('-columns-2', newWidth > 700);
+      this.toggleColumns(element, 700);
     }
   }
+  
+  private toggleColumns(element:HTMLElement, checkWidth:number = 750) {
+    if (element) {
+      jQuery(element).toggleClass('-can-have-columns', element.offsetWidth > checkWidth);
+    }
+  }
+
+  private toggleFullscreenColumns() {
+    let fullScreenLeftView = jQuery('.work-packages-full-view--split-left')[0];
+    this.toggleColumns(fullScreenLeftView);
+  }
 }

frontend/src/app/components/wp-form-group/wp-attribute-group.template.html

@@ -1,4 +1,4 @@
-<div class="-can-have-columns -columns-2">
+<div class="-columns-2">
   <div class="attributes-key-value"
        [ngClass]="{'-span-all-columns': descriptor.spanAll }"
        *ngFor="let descriptor of group.members; trackBy:trackByName">