Polish OpenAPI import modal

apps/ui/css/openapi-import.css

@@ -13,20 +13,25 @@
   position: fixed;
   inset: 0;
   z-index: 1200;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 28px 16px;
+  overflow: auto;
 }
 
 .openapi-import-backdrop {
-  position: absolute;
+  position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.52);
-  backdrop-filter: blur(5px);
+  background: rgba(4, 8, 18, 0.72);
+  backdrop-filter: blur(3px);
 }
 
 .openapi-import-dialog {
   position: relative;
   width: min(1040px, calc(100vw - 32px));
-  max-height: min(860px, calc(100vh - 32px));
-  margin: 16px auto;
+  max-height: calc(100vh - 56px);
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -74,7 +79,8 @@
 }
 
 #openapi-import-document {
-  min-height: 180px;
+  min-height: 132px;
+  max-height: 34vh;
   resize: vertical;
   padding: 14px;
   border: 1px solid var(--border);
@@ -86,6 +92,40 @@
   line-height: 1.55;
 }
 
+#openapi-import-file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.openapi-file-control {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.openapi-file-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  cursor: pointer;
+}
+
+.openapi-file-name {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .openapi-import-actions,
 .openapi-import-footer {
   display: flex;

apps/ui/index.html

@@ -392,6 +392,10 @@
         <div class="openapi-import-upload">
           <label class="openapi-file-label">
             <span>Файл OpenAPI/Swagger</span>
+            <span class="openapi-file-control">
+              <span class="btn-secondary openapi-file-button">Выбрать файл</span>
+              <span class="openapi-file-name" id="openapi-import-file-name">Файл не выбран</span>
+            </span>
             <input id="openapi-import-file" type="file" accept=".yaml,.yml,.json,application/json,text/yaml">
           </label>
           <textarea id="openapi-import-document" spellcheck="false" placeholder="Вставьте openapi.yaml или swagger.json"></textarea>

apps/ui/js/openapi-import.js

@@ -495,6 +495,7 @@
     state.filterMethod = '';
     qs('openapi-import-document').value = '';
     qs('openapi-import-file').value = '';
+    qs('openapi-import-file-name').textContent = 'Файл не выбран';
     qs('openapi-import-server-custom').value = '';
     qs('openapi-import-conflict-mode').value = 'rename';
     if (qs('openapi-import-search')) qs('openapi-import-search').value = '';
@@ -539,6 +540,7 @@
     qs('openapi-import-file').addEventListener('change', async function(event) {
       var file = event.target.files && event.target.files[0];
       if (!file) return;
+      qs('openapi-import-file-name').textContent = file.name;
       qs('openapi-import-document').value = await file.text();
     });
     document.querySelectorAll('[data-openapi-close]').forEach(function(node) {