style: number selection

src/pages/_components/number-selection/index.tsx

@@ -1,6 +1,6 @@
 import { LabelInfo } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { InputNumber } from 'antd';
+import { Flex, InputNumber } from 'antd';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import styles from './styles.less';
@@ -19,6 +19,7 @@ interface NumberSelectionProps {
   styles?: {
     input?: React.CSSProperties;
   };
+  labelExtra?: React.ReactNode;
   onChange?: (value: number) => void;
 }
 
@@ -33,6 +34,7 @@ const NumberSelection: React.FC<NumberSelectionProps> = ({
   disabled,
   label,
   required,
+  labelExtra,
   className,
   style,
   onChange
@@ -93,70 +95,77 @@ const NumberSelection: React.FC<NumberSelectionProps> = ({
     >
       {label !== undefined && label !== null && (
         <div className={styles.label}>
-          <LabelInfo label={label} required={required}></LabelInfo>
+          <LabelInfo
+            label={label}
+            required={required}
+            labelExtra={labelExtra}
+          ></LabelInfo>
         </div>
       )}
-      <div className={styles.content}>
-        {items.map((num) => {
-          return (
+      <Flex className={styles.contentWrapper} align="center">
+        <div className={styles.content}>
+          {items.map((num) => {
+            return (
+              <div
+                key={num}
+                role="radio"
+                aria-checked={num === value}
+                aria-disabled={disabled}
+                tabIndex={disabled ? -1 : 0}
+                className={classNames(styles.numberItem, {
+                  [styles.active]: num === value
+                })}
+                onClick={() => handleSelect(num)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleSelect(num);
+                  }
+                }}
+              >
+                {num}
+              </div>
+            );
+          })}
+        </div>
+        {showCustomInput && (
+          <div className={styles.inputWrapper}>
+            <div className={styles.line}></div>
             <div
-              key={num}
-              role="radio"
-              aria-checked={num === value}
-              aria-disabled={disabled}
-              tabIndex={disabled ? -1 : 0}
-              className={classNames(styles.numberItem, {
-                [styles.active]: num === value
+              className={classNames(styles.inputContainer, {
+                [styles.hasValue]: !!inputValue
               })}
-              onClick={() => handleSelect(num)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  handleSelect(num);
-                }
-              }}
             >
-              {num}
+              <InputNumber
+                controls
+                variant="borderless"
+                min={min}
+                max={max}
+                step={step}
+                disabled={disabled}
+                value={inputValue || undefined}
+                style={{
+                  fontSize: 14,
+                  width: 140,
+                  height: 32,
+                  backgroundColor: 'var(--ant-color-bg-container)',
+                  ...style
+                }}
+                styles={{
+                  input: {
+                    fontWeight: inputValue ? 500 : 400,
+                    ...(styles?.input as React.CSSProperties)
+                  }
+                }}
+                placeholder={intl.formatMessage({ id: 'common.option.other' })}
+                onChange={handleInputChange}
+                onBlur={commitInput}
+                onPressEnter={commitInput}
+              />
             </div>
-          );
-        })}
-      </div>
-      {showCustomInput && (
-        <div className={styles.inputWrapper}>
-          <div className={styles.line}></div>
-          <div
-            className={classNames(styles.inputContainer, {
-              [styles.hasValue]: !!inputValue
-            })}
-          >
-            <InputNumber
-              controls
-              variant="borderless"
-              min={min}
-              max={max}
-              step={step}
-              disabled={disabled}
-              value={inputValue || undefined}
-              style={{
-                fontSize: 14,
-                width: 140,
-                backgroundColor: 'var(--ant-color-bg-container)',
-                ...style
-              }}
-              styles={{
-                input: {
-                  fontWeight: inputValue ? 500 : 400,
-                  ...(styles?.input as React.CSSProperties)
-                }
-              }}
-              placeholder={intl.formatMessage({ id: 'common.option.other' })}
-              onChange={handleInputChange}
-              onBlur={commitInput}
-              onPressEnter={commitInput}
-            />
           </div>
-        </div>
-      )}
+        )}
+      </Flex>
     </div>
   );
 };

src/pages/_components/number-selection/styles.less

@@ -4,7 +4,10 @@
   border-radius: var(--ant-border-radius-lg);
   border: 1px solid var(--ant-color-border);
   overflow: hidden;
-  background-color: var(--ant-color-fill-quaternary);
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 4px;
+
   .inputContainer {
     &.hasValue {
       background-color: var(--ant-color-bg-container);
@@ -28,6 +31,7 @@
       display: flex;
       height: 22px;
       border-left: 1px solid var(--ant-color-split);
+      margin-inline: 4px;
     }
   }
 
@@ -37,14 +41,21 @@
     padding: 0 12px;
     color: var(--ant-color-text-tertiary);
     white-space: nowrap;
-    border-right: 1px solid var(--ant-color-split);
+    padding-block: 6px;
+  }
+  .contentWrapper {
+    width: 100%;
+    background-color: var(--ant-color-fill-quaternary);
+    border-radius: 4px;
+    height: 36px;
+    padding-left: 4px;
   }
   .content {
     display: flex;
     align-items: center;
     flex: 1;
     gap: 4px;
-    padding: 4px;
+    padding: 0px;
   }
   .numberItem {
     position: relative;
@@ -53,7 +64,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 40px;
+    height: 32px;
     border-radius: 4px;
     cursor: pointer;
     border: 1px solid transparent;