refactor: improve responsiveness

client/components/Button.tsx

@@ -60,7 +60,7 @@ Button.defaultProps = {
   as: "button",
   width: "auto",
   flex: "0 0 auto",
-  height: [32, 40],
+  height: [36, 40],
   py: 0,
   px: [24, 32],
   fontSize: [12, 13],

client/components/Header.tsx

@@ -53,7 +53,7 @@ const Header: FC = () => {
     <Li>
       <Link href="/login">
         <ALink href="/login" title="login / signup" forButton>
-          <Button>Login / Sign up</Button>
+          <Button height={[32, 40]}>Login / Sign up</Button>
         </ALink>
       </Link>
     </Li>
@@ -71,7 +71,7 @@ const Header: FC = () => {
     <Li>
       <Link href="/settings">
         <ALink href="/settings" title="Settings" forButton>
-          <Button>Settings</Button>
+          <Button height={[32, 40]}>Settings</Button>
         </ALink>
       </Link>
     </Li>

client/components/Settings/SettingsApi.tsx

@@ -14,12 +14,13 @@ import Animation from "../Animation";
 import { Colors } from "../../consts";
 
 const ApiKey = styled(Text).attrs({
-  mt: "2px",
+  mt: [0, "2px"],
   fontSize: [15, 16],
   bold: true
 })`
   border-bottom: 1px dotted ${Colors.StatsTotalUnderline};
   cursor: pointer;
+  word-break: break-word;
 
   :hover {
     opacity: 0.8;
@@ -40,7 +41,7 @@ const SettingsApi: FC = () => {
   };
 
   return (
-    <Col alignItems="flex-start">
+    <Col alignItems="flex-start" maxWidth="100%">
       <H2 mb={4} bold>
         API
       </H2>
@@ -58,7 +59,7 @@ const SettingsApi: FC = () => {
         </ALink>
       </Text>
       {apikey && (
-        <Flex alignItems="center" my={3}>
+        <Flex alignItems={["flex-start", "center"]} my={3}>
           {copied ? (
             <Animation offset="10px" duration="0.2s">
               <Icon
@@ -95,7 +96,7 @@ const SettingsApi: FC = () => {
           </CopyToClipboard>
         </Flex>
       )}
-      <Button mt={2} color="purple" onClick={onSubmit} disabled={loading}>
+      <Button mt={3} color="purple" onClick={onSubmit} disabled={loading}>
         <Icon name={loading ? "spinner" : "zap"} mr={2} stroke="white" />
         {loading ? "Generating..." : apikey ? "Regenerate" : "Generate"} key
       </Button>

client/components/Settings/SettingsBan.tsx

@@ -53,16 +53,11 @@ const SettingsBan: FC = () => {
           <TextInput
             {...text("id")}
             placeholder="Link ID (e.g. K7b2A)"
-            height={44}
-            fontSize={[16, 18]}
-            placeholderSize={[14, 15]}
             mr={3}
-            pl={24}
-            pr={24}
             width={[1, 3 / 5]}
             required
           />
-          <Button type="submit" disabled={submitting}>
+          <Button height={[36, 40]} type="submit" disabled={submitting}>
             <Icon
               name={submitting ? "spinner" : "lock"}
               stroke="white"

client/components/Settings/SettingsDomain.tsx

@@ -66,7 +66,7 @@ const SettingsDomain: FC = () => {
   };
 
   return (
-    <Col alignItems="flex-start">
+    <Col alignItems="flex-start" maxWidth="100%">
       <H2 mb={4} bold>
         Custom domain
       </H2>
@@ -79,7 +79,7 @@ const SettingsDomain: FC = () => {
         via form below:
       </Text>
       {domains.length ? (
-        <Table my={3}>
+        <Table my={3} scrollWidth="550px">
           <thead>
             <tr>
               <Th width={2 / 5}>Domain</Th>
@@ -119,37 +119,45 @@ const SettingsDomain: FC = () => {
           onSubmit={onSubmit}
           width={1}
           as="form"
-          my={4}
+          my={[3, 4]}
         >
-          <Flex width={1}>
-            <Col mr={2} flex="1 1 auto">
-              <Text {...label("customDomain")} as="label" mb={3} bold>
+          <Flex width={1} flexDirection={["column", "row"]}>
+            <Col mr={[0, 2]} mb={[3, 0]} flex="1 1 auto">
+              <Text
+                {...label("customDomain")}
+                as="label"
+                mb={[2, 3]}
+                fontSize={[15, 16]}
+                bold
+              >
                 Domain
               </Text>
               <TextInput
                 {...text("customDomain")}
                 placeholder="example.com"
-                height={44}
-                pl={24}
-                pr={24}
+                maxWidth="240px"
                 required
               />
             </Col>
-            <Col ml={2} flex="1 1 auto">
-              <Text {...label("homepage")} as="label" mb={3} bold>
+            <Col ml={[0, 2]} flex="1 1 auto">
+              <Text
+                {...label("homepage")}
+                as="label"
+                mb={[2, 3]}
+                fontSize={[15, 16]}
+                bold
+              >
                 Homepage (optional)
               </Text>
               <TextInput
                 {...text("homepage")}
                 placeholder="Homepage URL"
                 flex="1 1 auto"
-                height={44}
-                pl={24}
-                pr={24}
+                maxWidth="240px"
               />
             </Col>
           </Flex>
-          <Button type="submit" color="purple" mt={3} disabled={loading}>
+          <Button type="submit" color="purple" mt={[24, 3]} disabled={loading}>
             <Icon name={loading ? "spinner" : "plus"} mr={2} stroke="white" />
             {loading ? "Setting..." : "Set domain"}
           </Button>

client/components/Settings/SettingsPassword.tsx

@@ -15,7 +15,10 @@ import { Col } from "../Layout";
 const SettingsPassword: FC = () => {
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useMessage();
-  const [formState, { password }] = useFormState<{ password: string }>();
+  const [formState, { password, label }] = useFormState<{ password: string }>(
+    null,
+    { withIds: true }
+  );
 
   const onSubmit = async e => {
     e.preventDefault();
@@ -40,11 +43,20 @@ const SettingsPassword: FC = () => {
   };
 
   return (
-    <Col alignItems="flex-start">
+    <Col alignItems="flex-start" maxWidth="100%">
       <H2 mb={4} bold>
         Change password
       </H2>
       <Text mb={4}>Enter a new password to change your current password.</Text>
+      <Text
+        {...label("password")}
+        as="label"
+        mb={[2, 3]}
+        fontSize={[15, 16]}
+        bold
+      >
+        New password
+      </Text>
       <Flex as="form" onSubmit={onSubmit}>
         <TextInput
           {...password({
@@ -56,11 +68,8 @@ const SettingsPassword: FC = () => {
               }
             }
           })}
-          placeholder="New password"
-          height={44}
+          placeholder="New password..."
           width={[1, 2 / 3]}
-          pl={24}
-          pr={24}
           mr={3}
           required
         />

client/components/Shortener.tsx

@@ -193,6 +193,9 @@ const Shortener = () => {
           fontSize={[18, 20, 22]}
           width={1}
           height={[58, 64, 72]}
+          px={0}
+          pr={[48, 84]}
+          pl={[32, 40]}
           autoFocus
           data-lpignore
         />
@@ -252,7 +255,7 @@ const Shortener = () => {
               pr={[3, 24]}
               placeholderSize={[13, 14]}
               fontSize={[14, 15]}
-              height={[36, 44]}
+              height={[40, 44]}
               width={[210, 240]}
             />
           </Col>
@@ -274,7 +277,7 @@ const Shortener = () => {
               pr={[3, 24]}
               placeholderSize={[13, 14]}
               fontSize={[14, 15]}
-              height={[36, 44]}
+              height={[40, 44]}
               width={[210, 240]}
             />
           </Col>

client/components/TextInput.tsx

@@ -11,9 +11,7 @@ interface Props extends BoxProps {
   type?: string;
   value?: string;
   required?: boolean;
-  small?: boolean;
   onChange?: any;
-  tiny?: boolean;
   placeholderSize?: number[];
   br?: string;
   bbw?: string;
@@ -75,14 +73,11 @@ const TextInput = styled(Flex).attrs({
 
 TextInput.defaultProps = {
   value: "",
-  small: false,
-  tiny: false,
-  height: [56, 72],
+  height: [40, 44],
   py: 0,
-  pr: [48, 84],
-  pl: [32, 40],
-  fontSize: [14, 16],
-  placeholderSize: []
+  px: [3, 24],
+  fontSize: [14, 15],
+  placeholderSize: [13, 14]
 };
 
 export default TextInput;

client/pages/login.tsx

@@ -97,7 +97,7 @@ const LoginPage = () => {
 
   return (
     <AppWrapper>
-      <ColCenterV flex="0 0 auto" mt={24} mb={64}>
+      <ColCenterV maxWidth="100%" px={3} flex="0 0 auto" mt={4}>
         {verifying ? (
           <H2 textAlign="center" light>
             A verification email has been sent to{" "}
@@ -112,7 +112,11 @@ const LoginPage = () => {
               {...email("email")}
               placeholder="Email address..."
               height={[56, 64, 72]}
-              mb={[24, 4, 48]}
+              fontSize={[15, 16]}
+              px={[4, 40]}
+              mb={[24, 4]}
+              width={[300, 400]}
+              maxWidth="100%"
               autoFocus
             />
             <Text {...label("password")} as="label" mb={2} bold>
@@ -121,8 +125,12 @@ const LoginPage = () => {
             <TextInput
               {...password("password")}
               placeholder="Password..."
+              px={[4, 40]}
               height={[56, 64, 72]}
-              mb={[24, 4, 48]}
+              fontSize={[15, 16]}
+              width={[300, 400]}
+              maxWidth="100%"
+              mb={[24, 4]}
             />
             <Flex justifyContent="center">
               <Button