fix(SQL 题): 列多的数据表横向滚动，不再把每一列挤成一两个字宽

原来表格固定占满左栏宽度，列一多、或者左栏拖窄，列名和值都折成好几行，对不上哪个值是
哪一列的。现在按内容撑开、至少占满一行，放不下就在表格里横向滚

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/problem/components/SQLDataTable.vue

@@ -10,6 +10,11 @@ defineProps<{
 </script>
 
 <template>
+  <!--
+    列多的表横向滚动（设计文档第 8 节）。原来 n-table 固定占满宽度，列一多就把每一列
+    挤成一两个字宽，列名和值都折成好几行，对不上哪个值是哪一列的
+  -->
+  <div class="sqlScroll">
     <n-table class="sqlTable" size="small" :single-line="false">
       <thead>
         <tr>
@@ -30,14 +35,27 @@ defineProps<{
         </tr>
       </tbody>
     </n-table>
+  </div>
   <p v-if="truncated" class="truncNote">共 {{ totalRows }} 行，仅展示前 {{ rows.length }} 行</p>
 </template>
 
 <style scoped>
-.sqlTable {
+.sqlScroll {
+  overflow-x: auto;
   margin-bottom: 8px;
 }
 
+/* 按内容撑开、至少占满一行：列名和值都不折行，放不下就横向滚 */
+.sqlTable {
+  width: max-content;
+  min-width: 100%;
+}
+
+.sqlTable :deep(th),
+.sqlTable :deep(td) {
+  white-space: nowrap;
+}
+
 .colType {
   font-size: 12px;
   opacity: 0.55;