fix

src/components/ScenarioPage.vue

@@ -65,8 +65,8 @@ getScenario(Number(scenarioId))
 <style scoped>
 .center-block-custom {
   height: calc(100dvh - 70px);
-  -webkit-overflow-scrolling: touch;
   overflow: hidden auto;
+  -webkit-overflow-scrolling: touch;
   padding-bottom: 24px;
 }
 

src/components/ScenariosPage.vue

@@ -89,7 +89,7 @@ getScenarios()
 
 <template>
   <div class="center-block-custom">
-    <div class="width1200 display-table">
+    <div class="width1200 display-table catalog-grid">
       <div class="scenario-block" @click="showAddScenarioModal = true">
         <div class="scenario-image-block scenario-image-plus">+</div>
         <div class="scenario-content-block">
@@ -216,20 +216,36 @@ getScenarios()
 </template>
 
 <style scoped>
+.center-block-custom {
+  height: calc(100dvh - 70px);
+  -webkit-overflow-scrolling: touch;
+  overflow: hidden auto;
+  padding-bottom: 24px;
+}
+
+.catalog-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+  max-width: 100%;
+}
+
 .scenario-block {
-  /* background-color: #553333; */
   background-color: #222;
   border: 2px solid #222;
-  border-radius: 12px;
+  border-radius: 10px;
   cursor: pointer;
-  height: 300px;
-  margin: 10px;
-  position: relative;
-  width: 160px;
+  display: flex;
+  flex-direction: column;
+  min-height: 425px;
+  min-width: 0;
 }
 
 .scenario-content-block {
-  padding: 2px 10px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 12px;
 }
 
 .scenario-block:hover {
@@ -238,9 +254,9 @@ getScenarios()
 }
 
 .scenario-image-block {
+  aspect-ratio: 1;
   background-color: #111;
   border-radius: 10px;
-  height: 160px;
 }
 
 .scenario-image-plus {
@@ -256,6 +272,14 @@ getScenarios()
   width: 100px;
 }
 
+.import-icon .xicon {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
 .import-hint {
   color: #aaa;
   margin-bottom: 16px;
@@ -263,31 +287,44 @@ getScenarios()
 
 .scenario-image {
   background-position: center;
-  background-size: cover;
+  background-repeat: no-repeat;
+  background-size: contain;
 }
 
 .scenario-title {
+  overflow-wrap: anywhere;
   padding: 5px 0;
 }
 
+.scenario-label {
+  margin-top: auto;
+  padding-top: 12px;
+}
+
 .status-block {
-  bottom: 15px;
-  position: absolute;
-  right: 15px;
+  height: auto;
+  line-height: 1.5;
+  max-width: 100%;
+  min-height: var(--n-height);
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 @media (width >=1024px) {
+  .catalog-grid {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(auto-fill, 250px);
+    justify-content: center;
+  }
+
   .scenario-block {
-    height: 400px;
+    border-radius: 12px;
     width: 250px;
   }
 
-  .scenario-image-block {
-    height: 250px;
-  }
-
   .scenario-content-block {
-    padding: 4px 10px;
+    padding: 12px;
   }
 }
 </style>