feat(admin-web): improve responsive admin layout

apps/admin-web/src/styles.css

@@ -23,10 +23,15 @@ html,
 body,
 #app {
   min-height: 100vh;
+  width: 100%;
   margin: 0;
   padding: 0;
 }
 
+body {
+  overflow-x: hidden;
+}
+
 /* Typography Utilities */
 .eyebrow {
   margin: 0 0 8px;
@@ -157,6 +162,15 @@ body,
 .app-root {
   display: flex;
   min-height: 100vh;
+  width: 100%;
+  min-width: 0;
+}
+
+.ant-app,
+.ant-layout,
+.ant-layout-content,
+.ant-layout .ant-layout {
+  min-width: 0;
 }
 
 /* Workspace Layout Specifics */
@@ -306,3 +320,160 @@ body,
   padding: 0 20px !important;
   font-weight: 500 !important;
 }
+
+.ant-drawer-content-wrapper {
+  max-width: 100vw;
+}
+
+.ant-table-wrapper {
+  max-width: 100%;
+}
+
+.ant-table-wrapper .ant-table-container,
+.ant-table-wrapper .ant-table-content,
+.ant-table-wrapper .ant-table-body {
+  max-width: 100%;
+  scrollbar-width: thin;
+}
+
+.ant-table-wrapper .ant-table-content,
+.ant-table-wrapper .ant-table-body {
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 768px) {
+  .section-heading,
+  .page-title-card__header,
+  .page-title-card__actions,
+  .table-actions-row,
+  [class$='__header'],
+  [class$='__table-head'],
+  [class*='__toolbar'],
+  [class*='-toolbar'],
+  [class*='__filters-inline'],
+  [class*='__filters'] {
+    flex-wrap: wrap;
+  }
+
+  .section-heading,
+  .page-title-card__header {
+    align-items: stretch;
+    gap: 16px;
+  }
+
+  .section-heading {
+    margin-bottom: 16px;
+  }
+
+  .page-title-card__header {
+    padding: 16px;
+  }
+
+  .page-title-card__actions {
+    width: 100%;
+  }
+
+  .page-title-card__actions > * {
+    min-width: 0;
+  }
+
+  .page-title-card__copy h2 {
+    font-size: 18px;
+  }
+
+  .ant-card-body {
+    padding: 16px !important;
+  }
+
+  .ant-table-wrapper {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .ant-table-wrapper .ant-spin-nested-loading,
+  .ant-table-wrapper .ant-spin-container,
+  .ant-table-wrapper .ant-table,
+  .ant-table-wrapper .ant-table-container {
+    min-width: 0;
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 14px !important;
+  }
+
+  .ant-tabs-nav-wrap {
+    overflow: auto !important;
+    scrollbar-width: none;
+  }
+
+  .ant-tabs-nav-wrap::-webkit-scrollbar {
+    display: none;
+  }
+
+  .ant-tabs-nav-list {
+    min-width: max-content;
+  }
+
+  .ant-form,
+  .ant-form-item,
+  .ant-picker,
+  .ant-select,
+  .ant-input,
+  .ant-input-number,
+  .ant-input-affix-wrapper,
+  .ant-space,
+  [class*='__filter'],
+  [class*='filter-item'] {
+    max-width: 100%;
+  }
+
+  .ant-form .ant-row,
+  .ant-space,
+  [class*='__filters'],
+  [class*='__filters-inline'] {
+    row-gap: 12px;
+  }
+
+  .ant-space {
+    flex-wrap: wrap;
+  }
+
+  .ant-modal {
+    max-width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .ant-modal-root .ant-modal-wrap {
+    padding: 0 12px !important;
+  }
+
+  .ant-modal-body {
+    max-height: calc(100dvh - 180px);
+    overflow: auto;
+  }
+}
+
+@media (max-width: 576px) {
+  .login-screen__form-container {
+    padding: 40px 20px;
+  }
+
+  .ant-card-body {
+    padding: 14px !important;
+  }
+
+  .ant-table-wrapper {
+    font-size: 13px;
+  }
+
+  .ant-pagination {
+    justify-content: center;
+  }
+
+  .table-actions-row {
+    justify-content: flex-start;
+  }
+}