style: large modal height responsive

2025-11-12 19:18:10 +08:00
parent d1fa6dd03c
commit b7656d65e7
13 changed files with 85 additions and 62 deletions
@@ -67,9 +67,11 @@ const AddPool: React.FC<AddModalProps> = ({
      onCancel={handleCancel}
      destroyOnHidden={true}
      closeIcon={true}
+      centered={true}
      maskClosable={false}
      keyboard={false}
      width={600}
+      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
      footer={
        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
      }
@@ -62,7 +62,7 @@ const Container = styled.div`
  width: 800px;
  margin: 0 auto;
  .command-info {
-    margin-top: 24px;
+    margin-top: 16px;
    margin-bottom: 8px;
  }
 `;
@@ -24,17 +24,15 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
    <ScrollerModal
      title={intl.formatMessage({ id: 'resources.button.create' })}
      open={open}
-      centered={false}
+      centered={true}
      onCancel={onCancel}
      destroyOnHidden={true}
      closeIcon={true}
      maskClosable={false}
      keyboard={false}
      width={860}
-      style={{
-        top: 100
-      }}
-      maxContentHeight={600}
+      style={{}}
+      maxContentHeight={'max(calc(100vh - 200px), 600px)'}
      footer={null}
    >
      <AddWorkerStep registrationInfo={registrationInfo} provider={provider} />
@@ -10,7 +10,7 @@ const Wrapper = styled.div<{ $cols?: number }>`
  grid-template-columns: repeat(${(props) => props.$cols || 3}, 1fr);
  gap: 16px;
  .template-card-wrapper {
-    padding: 16px;
+    padding: 10px;
  }
  .template-card-inner {
    justify-content: center;
@@ -140,7 +140,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
    <Box>
      <ProviderCatalog
        onSelect={onSelect}
-        height={60}
+        height={50}
        current={current}
        dataList={supportedHardPlatforms}
        clickable={clickable}