fix(测试跟踪): 功能用例预览可显示区域小

--bug=1028062 --user=白奇 【测试跟踪】github#25735，功能用例预览可显示区域小 https://www.tapd.cn/55049933/s/1396400

test-track/frontend/src/business/case/components/TestCasePreview.vue

@@ -7,41 +7,58 @@
     class="case-desc-drawer-layout"
   >
     <template v-slot:title>
-      {{$t('test_track.case.case_desc')}}
+      {{ $t("test_track.case.case_desc") }}
     </template>
 
-    <div style="height: 1000px; overflow: scroll;">
+    <div style="height: calc(100vh - 60px); overflow: scroll">
       <el-form :model="data" class="case-desc-form">
-
         <div class="prerequisite-item-layout">
-          <h3>{{$t('test_track.case.prerequisite')}}</h3>
+          <h3>{{ $t("test_track.case.prerequisite") }}</h3>
           <div class="case-desc-form-div">
-            <span v-if="!data['prerequisite']">{{$t('case.none')}}</span>
+            <span v-if="!data['prerequisite']">{{ $t("case.none") }}</span>
-            <ms-mark-down-text v-else :disabled="true" :data="data" prop="prerequisite"/>
+            <ms-mark-down-text
+              v-else
+              :disabled="true"
+              :data="data"
+              prop="prerequisite"
+            />
           </div>
         </div>
 
-        <step-change-item :label-width="formLabelWidth" :form="data"/>
+        <step-change-item :label-width="formLabelWidth" :form="data" />
 
         <div v-if="data.stepModel === 'TEXT'" class="prerequisite-item-layout">
-          <h3>{{$t('test_track.case.step_desc')}}</h3>
+          <h3>{{ $t("test_track.case.step_desc") }}</h3>
           <div class="case-desc-form-div">
-            <span v-if="!data['stepDescription']">{{$t('case.none')}}</span>
+            <span v-if="!data['stepDescription']">{{ $t("case.none") }}</span>
-            <ms-mark-down-text v-else :disabled="true" :data="data" prop="stepDescription"/>
+            <ms-mark-down-text
+              v-else
+              :disabled="true"
+              :data="data"
+              prop="stepDescription"
+            />
           </div>
         </div>
 
         <div v-if="data.stepModel === 'TEXT'" class="prerequisite-item-layout">
-          <h3>{{$t('test_track.case.expected_results')}}</h3>
+          <h3>{{ $t("test_track.case.expected_results") }}</h3>
           <div class="case-desc-form-div">
-            <span v-if="!data['expectedResult']">{{$t('case.none')}}</span>
+            <span v-if="!data['expectedResult']">{{ $t("case.none") }}</span>
-            <ms-mark-down-text v-else :disabled="true" :data="data" prop="expectedResult"/>
+            <ms-mark-down-text
+              v-else
+              :disabled="true"
+              :data="data"
+              prop="expectedResult"
+            />
           </div>
         </div>
 
-        <div v-if="data.stepModel === 'STEP' || !data.stepModel" class="prerequisite-item-layout">
+        <div
-          <div class="case-desc-form-div">
+          v-if="data.stepModel === 'STEP' || !data.stepModel"
-            <ms-case-desc-text-item :data="data"/>
+          class="prerequisite-item-layout"
+        >
+          <div class="case-desc-form-div case-desc-form-table-div">
+            <ms-case-desc-text-item :data="data" />
           </div>
         </div>
       </el-form>
@@ -63,7 +80,7 @@ export default {
     MsCaseDescTextItem,
     StepChangeItem,
     TestCaseStepItem,
-    MsMarkDownText
+    MsMarkDownText,
   },
   props: {
     width: {
@@ -88,8 +105,8 @@ export default {
       formLabelWidth: "100px",
       stepForLabelWidth: "150px",
       visible: false,
-      data: {}
+      data: {},
-    }
+    };
   },
   methods: {
     open() {
@@ -100,19 +117,19 @@ export default {
     },
     setData(data) {
       this.data = data;
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
 :deep(.el-drawer__header) {
-  font-family: 'PingFang SC';
+  font-family: "PingFang SC";
   font-style: normal;
   font-weight: bold;
   font-size: 16px;
   line-height: 24px;
-  color: #1F2329;
+  color: #1f2329;
   flex: none;
   flex-grow: 0;
   padding: 16px 24px;
@@ -120,19 +137,18 @@ export default {
   margin: 0;
 }
 
-
 :deep(i.el-dialog__close.el-icon.el-icon-close) {
   float: right;
 }
 
 .prerequisite-item-layout {
   padding: 0px 24px 0 24px;
-  font-family: 'PingFang SC';
+  font-family: "PingFang SC";
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 22px;
-  color: #1F2329;
+  color: #1f2329;
   flex: none;
   order: 0;
   flex-grow: 0;
@@ -140,7 +156,7 @@ export default {
   margin-bottom: 20px;
 }
 
-.prerequisite-item-layout h3{
+.prerequisite-item-layout h3 {
   font-weight: bold;
   margin: 0 0 8px;
   font-size: 14px;
@@ -151,12 +167,12 @@ export default {
 }
 
 .case-desc-form :deep(.el-form-item .el-form-item__label) {
-  font-family: 'PingFang SC';
+  font-family: "PingFang SC";
   font-style: normal;
   font-weight: bold;
   font-size: 14px;
   line-height: 22px;
-  color: #1F2329;
+  color: #1f2329;
   flex: none;
   order: 0;
   flex-grow: 0;
@@ -166,14 +182,14 @@ export default {
 
 :deep(.ms-table-header-cell) {
   height: 46px;
-  background-color: #F5F6F7;
+  background-color: #f5f6f7;
-  font-family: 'PingFang SC';
+  font-family: "PingFang SC";
   font-size: 14px;
   font-weight: 500;
   border: 1px solid rgba(31, 35, 41, 0.15);
   border-right-width: 0;
   border-left-width: 0;
-  color: #646A73;
+  color: #646a73;
   line-height: 22px;
   padding: 0px;
   align-items: center;
@@ -186,4 +202,7 @@ export default {
   height: 150px;
   overflow-y: scroll;
 }
+.case-desc-form-table-div {
+  height: auto;
+}
 </style>