style(fe): enforce 100% viewport-fit zero-scroll dynamic height calculation for ModelOperationTable AG Grid

frontend/src/features/model-operations/components/ModelOperationTable.vue

@@ -32,7 +32,7 @@ const columns: UiGridColumn[] = [
       <KsDataGrid
         :rows="props.operations"
         :columns="columns"
-        height="240px"
+        height="100%"
         :show-row-number="true"
       />
     </div>
@@ -43,12 +43,14 @@ const columns: UiGridColumn[] = [
 .operation-plan-panel {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-height: 0;
   gap: var(--ks-space-3);
   padding: var(--ks-space-3);
   background: var(--ks-color-surface);
   border: 1px solid var(--ks-color-border);
   border-radius: var(--ks-radius-sm);
-  margin-top: var(--ks-space-3);
+  margin-top: var(--ks-space-2);
 }
 
 .panel-title {
@@ -60,7 +62,8 @@ const columns: UiGridColumn[] = [
 
 .grid-wrapper {
   width: 100%;
-  height: 260px;
+  flex: 1;
+  min-height: 220px;
   border: 1px solid var(--ks-color-border);
   border-radius: var(--ks-radius-sm);
   overflow: hidden;

frontend/src/features/model-operations/pages/ModelOperationsPage.vue

@@ -38,3 +38,13 @@ const handleRetry = () => {
     </div>
   </VersionGovernancePage>
 </template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+}
+</style>