chore(web): timefield bug fix (#828)

Co-authored-by: KaWaite <[email protected]>
reearth · Nov 23, 2023 · df99b18 · df99b18
1 parent 09338f5
commit df99b18
Showing 1 changed file with 40 additions and 45 deletions.
diff --git a/web/src/beta/components/fields/DateTimeField/index.tsx b/web/src/beta/components/fields/DateTimeField/index.tsx
@@ -37,60 +37,47 @@ const DateTimeField: React.FC<Props> = ({ name, description, value, onChange })
 
   return (
     <Property name={name} description={description}>
-      <Wrapper>
-        <Popover.Provider open={!!open} placement="bottom">
-          <Popover.Trigger asChild>
-            <InputWrapper disabled={true}>
-              <Input dataTimeSet={!!dateTime}>
-                <Text size="footnote" customColor>
-                  {dateTime ? dateTime : "YYYY-MM-DDThh:mm:ss±hh:mm"}
-                </Text>
-                <DeleteIcon
-                  icon="bin"
-                  size={10}
-                  disabled={!dateTime}
-                  onClick={handleRemoveSetting}
-                />
-              </Input>
-              <TriggerButton
-                buttonType="secondary"
-                text={t("set")}
-                icon="clock"
-                size="small"
-                iconPosition="left"
-                onClick={() => handlePopOver()}
-              />
-            </InputWrapper>
-          </Popover.Trigger>
-          <Popover.Content autoFocus={false} attachToRoot>
-            {open && (
-              <EditPanel
-                setDateTime={setDateTime}
-                value={dateTime}
-                onChange={onChange}
-                onClose={handlePopOver}
-              />
-            )}
-          </Popover.Content>
-        </Popover.Provider>
-      </Wrapper>
+      <Popover.Provider open={!!open} placement="bottom">
+        <Popover.Trigger asChild>
+          <InputWrapper disabled={true}>
+            <Input dataTimeSet={!!dateTime}>
+              <StyledText size="footnote" customColor>
+                {dateTime ? dateTime : "YYYY-MM-DDThh:mm:ss±hh:mm"}
+              </StyledText>
+              <DeleteIcon icon="bin" size={10} disabled={!dateTime} onClick={handleRemoveSetting} />
+            </Input>
+            <TriggerButton
+              buttonType="secondary"
+              text={t("set")}
+              icon="clock"
+              size="small"
+              iconPosition="left"
+              onClick={() => handlePopOver()}
+            />
+          </InputWrapper>
+        </Popover.Trigger>
+        <Popover.Content autoFocus={false} attachToRoot>
+          {open && (
+            <EditPanel
+              setDateTime={setDateTime}
+              value={dateTime}
+              onChange={onChange}
+              onClose={handlePopOver}
+            />
+          )}
+        </Popover.Content>
+      </Popover.Provider>
     </Property>
   );
 };
 
 export default DateTimeField;
 
-const Wrapper = styled.div`
-  display: flex;
-  align-items: stretch;
-  gap: 4px;
-`;
-
 const InputWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   width: 100%;
   gap: 10px;
-  height: 28px;
+  flex-wrap: wrap;
 `;
 
 const Input = styled.div<{ dataTimeSet?: boolean }>`
@@ -105,10 +92,18 @@ const Input = styled.div<{ dataTimeSet?: boolean }>`
   color: ${({ theme }) => theme.content.strong};
   background: ${({ theme }) => theme.bg[1]};
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) inset;
-
+  width: 65%;
   color: ${({ theme, dataTimeSet }) => (dataTimeSet ? theme.content.strong : theme.content.weak)};
 `;
 
+const StyledText = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  padding: 4px 0;
+`;
+
 const TriggerButton = styled(Button)`
   margin: 0;
 `;