Fix nested Flexible Layout direction problem

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -45,7 +45,11 @@
       @object-drop-to="moveOrCreateNewFrame"
     />
 
-    <div role="row" class="c-fl-container__frames-holder">
+    <div
+      role="row"
+      class="c-fl-container__frames-holder"
+      :class="[rowsLayout ? '--layout-rows' : '--layout-cols']"
+    >
       <template v-for="(frame, i) in frames" :key="frame.id">
         <frame-component
           class="c-fl-container__frame"

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -30,10 +30,8 @@
 
     <div
       class="c-fl__container-holder u-style-receiver js-style-receiver"
-      :class="{
-        'c-fl--rows': rowsLayout === true
-      }"
-      :aria-label="`Flexible Layout ${rowsLayout ? 'Row' : 'Column'}`"
+      :class="[rowsLayout ? 'c-fl--rows' : 'c-fl--cols']"
+      :aria-label="`Flexible Layout ${rowsLayout ? 'Rows' : 'Columns'}`"
     >
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
         <drop-hint
@@ -45,7 +43,6 @@
         />
 
         <container-component
-          class="c-fl__container"
           :index="index"
           :container="container"
           :rows-layout="rowsLayout"
@@ -148,13 +145,6 @@ export default {
     };
   },
   computed: {
-    layoutDirectionStr() {
-      if (this.rowsLayout) {
-        return 'Rows';
-      } else {
-        return 'Columns';
-      }
-    },
     allContainersAreEmpty() {
       return this.containers.every((container) => container.frames.length === 0);
     }

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -7,7 +7,6 @@
   $majorOffset: 35%;
   content: '';
   display: block;
-  position: absolute;
   @include grippy($c: $editFrameSelectedMovebarColorFg, $dir: $dir);
   @if $dir == 'x' {
     top: $minorOffset;
@@ -30,23 +29,26 @@
     flex: 0 0 auto;
   }
 
+  &--cols {
+  }
+
+  &--rows {
+  }
+
   &__container-holder {
     display: flex;
     flex: 1 1 100%; // Must be 100% to work
     overflow: auto;
 
-    // Columns by default
-    flex-direction: row;
-    > * + * {
-      margin-left: 1px;
+    // Controls layout of c-fl__container(s)
+    &[class*='--cols'] {
+      flex-direction: row;
+      column-gap: 1px;
     }
 
     &[class*='--rows'] {
       flex-direction: column;
-      > * + * {
-        margin-left: 0;
-        margin-top: 1px;
-      }
+      row-gap: 1px;
     }
   }
 
@@ -119,10 +121,18 @@
   &__frames-holder {
     display: flex;
     flex: 1 1 100%; // Must be 100% to work
-    flex-direction: column; // Default
+    flex-direction: row; // Default
     align-content: stretch;
     align-items: stretch;
     overflow: hidden; // This sucks, but doing in the short-term
+
+    &.--layout-cols {
+      flex-direction: column !important;
+    }
+
+    &.--layout-rows {
+      flex-direction: row !important;
+    }
   }
 
   .is-editing & {

src/plugins/flexibleLayout/toolbarProvider.js

@@ -61,13 +61,13 @@ function ToolbarProvider(openmct) {
         options: [
           {
             value: true,
-            icon: 'icon-columns',
-            title: 'Columns layout'
+            icon: 'icon-rows',
+            title: 'Switch to rows layout'
           },
           {
             value: false,
-            icon: 'icon-rows',
-            title: 'Rows layout'
+            icon: 'icon-columns',
+            title: 'Switch to columns layout'
           }
         ]
       };