making admin dashboard more mobile friendly

net/web/src/admin/dashboard/Dashboard.jsx

@@ -79,10 +79,11 @@ export function Dashboard({ token, config, logout }) {
           footer={[ <Button type="primary" onClick={() => actions.setShowCreate(false)}>OK</Button> ]}
           onCancel={() => actions.setShowCreate(false)}>
         <CreateLayout>
-          <div>{createLink()}</div>
-          <Button icon={<CopyOutlined />} size="small"
-            onClick={() => onClipboard(createLink())}
-          />
+          <div class="url">
+            <div class="link">{createLink()}</div>
+            <Button icon={<CopyOutlined />} size="small"
+              onClick={() => onClipboard(createLink())} />
+          </div>
         </CreateLayout>
       </Modal>    
     </DashboardWrapper>

net/web/src/admin/dashboard/Dashboard.styled.js

@@ -47,6 +47,8 @@ export const DashboardWrapper = styled.div`
     .settings {
       display: flex;
       align-items: center;
+      justify-content: center;
+      width: 40px;
     }
 
     .add {
@@ -84,6 +86,19 @@ export const SettingsLayout = styled(Space)`
   }
 `;
 
-export const CreateLayout = styled(Space)`
-  white-space: nowrap;
+export const CreateLayout = styled.div`
+  .url {
+    display: flex;
+    flex-direction: row;
+    max-width: 100%;
+   
+    .link {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-grow: 1;
+      min-width: 0;
+      padding-right: 8px;
+    }
+  }
 `

net/web/src/admin/dashboard/accountItem/AccountItem.jsx

@@ -57,10 +57,11 @@ export function AccountItem({ token, item, remove }) {
           footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}
           onCancel={() => actions.setShowAccess(false)}>
         <AccessLayout>
-          <div>{accessLink()}</div>
-          <Button icon={<CopyOutlined />} size="small"
-            onClick={() => onClipboard(accessLink())}
-          />
+          <div class="url">
+            <div class="link">{accessLink()}</div>
+            <Button icon={<CopyOutlined />} size="small"
+              onClick={() => onClipboard(accessLink())}/>
+          </div>
         </AccessLayout>
       </Modal>  
     </AccountItemWrapper>

net/web/src/admin/dashboard/accountItem/AccountItem.styled.js

@@ -82,6 +82,19 @@ export const DeleteButton = styled(Button)`
   color: red;
 `
 
-export const AccessLayout = styled(Space)`
-  white-space: nowrap;
+export const AccessLayout = styled.div`
+  .url {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+   
+    .link {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-grow: 1;
+      min-width: 0;
+      padding-right: 8px;
+    }
+  }
 `

net/web/src/admin/prompt/Prompt.jsx

@@ -26,6 +26,16 @@ export  function Prompt({ login }) {
     }
   }
 
+  const placeholder = () => {
+    if (state.unclaimed === true) {
+      return 'Set Access Token';
+    }
+    if (state.unclaimed === false) {
+      return 'Access Token';
+    }
+    return '';
+  }
+
   return (
     <PromptWrapper>
       <div class="app-title">
@@ -39,7 +49,7 @@ export  function Prompt({ login }) {
         <Form name="basic" wrapperCol={{ span: 24, }}>
 
           <Form.Item name="password">
-            <Input.Password placeholder="Admin Password" spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)}
+            <Input.Password placeholder={placeholder()} spellCheck="false" onChange={(e) => actions.setPassword(e.target.value)}
                 autocomplete="current-password" onKeyDown={(e) => keyDown(e)} prefix={<LockOutlined />} size="large" />
           </Form.Item>
 

net/web/src/admin/prompt/usePrompt.hook.js

@@ -24,7 +24,7 @@ export function usePrompt() {
   const checkStatus = async () => {
     try {
       let status = await getNodeStatus();
-      updateState({ uncliamed: status });
+      updateState({ unclaimed: status });
     }
     catch(err) {
       console.log("failed to check node status");