feat: replace hard-to-grab resize tabs with card edge/corner resizing

tensorbored/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -192,11 +192,7 @@
       </mat-menu>
     </span>
   </div>
-  <div
-    #chartContainer
-    class="chart-container"
-    [persistResize]="'scalar-chart:' + tag"
-  >
+  <div #chartContainer class="chart-container">
     <mat-spinner
       diameter="18"
       *ngIf="loadState === DataLoadState.LOADING"

tensorbored/webapp/metrics/views/card_renderer/scalar_card_component.scss

@@ -95,7 +95,6 @@ $_data_table_initial_height: 100px;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
-  resize: vertical;
 
   mat-spinner {
     $mat-icon-button-diameter: 40px;

tensorbored/webapp/metrics/views/card_renderer/superimposed_card_component.ng.html

@@ -111,10 +111,7 @@
     </div>
   </div>
 
-  <div
-    class="chart-container"
-    [persistResize]="'superimposed-chart:' + superimposedCardId"
-  >
+  <div class="chart-container">
     <mat-spinner
       diameter="18"
       *ngIf="loadState === DataLoadState.LOADING"

tensorbored/webapp/metrics/views/card_renderer/superimposed_card_component.scss

@@ -123,7 +123,6 @@ limitations under the License.
   overflow: hidden;
   position: relative;
   padding: 8px;
-  resize: vertical;
 
   mat-spinner {
     position: absolute;

tensorbored/webapp/metrics/views/main_view/BUILD

@@ -166,6 +166,7 @@ tf_ng_module(
         "//tensorbored/webapp/types:ui",
         "//tensorbored/webapp/util:string",
         "//tensorbored/webapp/util:types",
+        "//tensorbored/webapp/widgets:edge_resize",
         "//tensorbored/webapp/widgets/filter_input",
         "@npm//@angular/common",
         "@npm//@angular/core",

tensorbored/webapp/metrics/views/main_view/card_grid_component.ng.html

@@ -38,6 +38,8 @@
           'full-width': cardsAtFullWidth.has(item.cardId) || cardStateMap[item.cardId]?.fullWidth,
           'full-height': cardsAtFullHeight.has(item.cardId) || cardStateMap[item.cardId]?.tableExpanded
         }"
+      [cardEdgeResize]="'card:' + item.cardId"
+      (columnSpanChanged)="onColumnSpanChanged(item.cardId, $event)"
       cdkDrag
       [cdkDragDisabled]="!allowPinnedReorder"
       [cdkDragStartDelay]="dragStartDelayMs"

tensorbored/webapp/metrics/views/main_view/card_grid_component.scss

@@ -34,13 +34,72 @@ $_background: map-get($tb-theme, background);
 .card-space {
   display: flex;
   flex-direction: column;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 8px;
+    height: 8px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  &:hover::after {
+    opacity: 0.3;
+  }
+
+  &[data-resize-edge='bottom']::after,
+  &[data-resize-edge='right']::after,
+  &[data-resize-edge='corner']::after {
+    opacity: 0.8;
+  }
+
+  &[data-resize-edge='bottom']::after {
+    width: 100%;
+    height: 3px;
+    right: 0;
+    bottom: 0;
+    background: currentColor;
+    border-radius: 2px;
+  }
+
+  &[data-resize-edge='right']::after {
+    width: 3px;
+    height: 100%;
+    right: 0;
+    bottom: 0;
+    background: currentColor;
+    border-radius: 2px;
+  }
+
+  &[data-resize-edge='corner']::after {
+    width: 12px;
+    height: 12px;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, transparent 50%, currentColor 50%);
+    border-radius: 0 0 4px 0;
+  }
 }
 
 .card-space.full-width {
   grid-column-start: 1;
   grid-column-end: -1;
 }
 
+.card-space.edge-resizing-width {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  transition: none;
+
+  @include tb-dark-theme {
+    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
+  }
+}
+
 .card-space.full-height {
   min-height: $metrics-min-card-height * 1.5;
 

tensorbored/webapp/metrics/views/main_view/card_grid_component.ts

@@ -232,4 +232,8 @@ export class CardGridComponent {
       this.cardsAtFullHeight.delete(cardId);
     }
   }
+
+  onColumnSpanChanged(cardId: CardId, _span: number) {
+    this.cardsAtFullWidth.delete(cardId);
+  }
 }

tensorbored/webapp/metrics/views/main_view/main_view_module.ts

@@ -25,6 +25,7 @@ import {MatInputModule} from '@angular/material/input';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module';
 import {CardRendererModule} from '../card_renderer/card_renderer_module';
+import {EdgeResizeModule} from '../../../widgets/edge_resize_module';
 import {RightPaneModule} from '../right_pane/right_pane_module';
 import {ScalarColumnEditorModule} from '../right_pane/scalar_column_editor/scalar_column_editor_module';
 import {CardGridComponent} from './card_grid_component';
@@ -73,6 +74,7 @@ import {SuperimposedCardsViewContainer} from './superimposed_cards_view_containe
     CommonModule,
     CustomizationModule,
     DragDropModule,
+    EdgeResizeModule,
     FilterInputModule,
     MatAutocompleteModule,
     MatButtonModule,

tensorbored/webapp/metrics/views/main_view/superimposed_cards_view_component.scss

@@ -84,6 +84,7 @@ limitations under the License.
     border-radius: 4px;
     box-sizing: border-box;
     min-height: $metrics-min-card-height;
+    position: relative;
 
     &.full-width {
       grid-column-start: 1;
@@ -93,6 +94,54 @@ limitations under the License.
     &.full-height {
       min-height: $metrics-min-card-height * 1.5;
     }
+
+    &.edge-resizing-width {
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+      transition: none;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 8px;
+      height: 8px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    &:hover::after {
+      opacity: 0.3;
+    }
+
+    &[data-resize-edge='bottom']::after,
+    &[data-resize-edge='right']::after,
+    &[data-resize-edge='corner']::after {
+      opacity: 0.8;
+    }
+
+    &[data-resize-edge='bottom']::after {
+      width: 100%;
+      height: 3px;
+      background: currentColor;
+      border-radius: 2px;
+    }
+
+    &[data-resize-edge='right']::after {
+      width: 3px;
+      height: 100%;
+      background: currentColor;
+      border-radius: 2px;
+    }
+
+    &[data-resize-edge='corner']::after {
+      width: 12px;
+      height: 12px;
+      background: linear-gradient(135deg, transparent 50%, currentColor 50%);
+      border-radius: 0 0 4px 0;
+    }
   }
 }
 

tensorbored/webapp/metrics/views/main_view/superimposed_cards_view_component.ts

@@ -57,6 +57,8 @@ const MAX_CARD_MIN_WIDTH_IN_PX = 735;
           class="card-wrapper"
           [class.full-width]="(cardsAtFullWidth$ | async)?.has(card.id)"
           [class.full-height]="cardsAtFullHeight.has(card.id)"
+          [cardEdgeResize]="'superimposed:' + card.id"
+          (columnSpanChanged)="onColumnSpanChanged(card.id, $event)"
         >
           <superimposed-card
             [superimposedCardId]="card.id"
@@ -119,4 +121,9 @@ export class SuperimposedCardsViewComponent implements OnChanges {
       this.cardsAtFullHeight.delete(cardId);
     }
   }
+
+  onColumnSpanChanged(_cardId: string, _span: number) {
+    // Width is handled directly by the directive's inline grid-column style.
+    // No store dispatch needed — the span is persisted in localStorage by the directive.
+  }
 }

tensorbored/webapp/widgets/BUILD

@@ -17,6 +17,17 @@ tf_ng_module(
     ],
 )
 
+tf_ng_module(
+    name = "edge_resize",
+    srcs = [
+        "edge_resize_directive.ts",
+        "edge_resize_module.ts",
+    ],
+    deps = [
+        "@npm//@angular/core",
+    ],
+)
+
 tf_ng_module(
     name = "resize_detector",
     srcs = [