Improve mobile support of views (scalableminds#7876)

* make login, registration and forgot password view more responsive to mobile devices
- includes adding a link back to login for password reset view

* make dashboard dataset view less awful

* add changelog entry

Author: MichaelBuessemeyer

CHANGELOG.unreleased.md

@@ -20,6 +20,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Changed
 - The "WEBKNOSSOS Changelog" modal now lazily loads its content potentially speeding up the initial loading time of WEBKNOSSOS and thus improving the UX. [#7843](https://github.com/scalableminds/webknossos/pull/7843)
 - Updated the min max settings for the histogram to allow floating point color layers to have negative min / max values. [#7873](https://github.com/scalableminds/webknossos/pull/7873)
+- Made the login, registration, forgot password and dataset dashboard pages more mobile friendly. [#7876](https://github.com/scalableminds/webknossos/pull/7876)
 - From now on only project owner get a notification email upon project overtime. The organization specific email list `overTimeMailingList` was removed. [#7842](https://github.com/scalableminds/webknossos/pull/7842)
 - Replaced skeleton comment tab component with antd's `<Tree />`component. [#7802](https://github.com/scalableminds/webknossos/pull/7802)
 

frontend/javascripts/admin/auth/login_view.tsx

@@ -29,7 +29,7 @@ function LoginView({ history, redirect }: Props) {
 
   return (
     <Row justify="center" align="middle" className="login-view">
-      <Col>
+      <Col xs={22} sm={20} md={16} lg={12} xl={8}>
         <Card className="login-content">
           <h3>Login</h3>
           <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />

frontend/javascripts/admin/auth/registration_view.tsx

@@ -83,7 +83,7 @@ function RegistrationViewGeneric() {
     <Spin spinning={isLoading}>
       <Row justify="center" align="middle" className="login-view">
         <Col>
-          <Card className="login-content drawing-signup" style={{ width: 1000 }}>
+          <Card className="login-content drawing-signup" style={{ maxWidth: 1000 }}>
             <h3>Sign Up</h3>
             {content}
             <Link to="/auth/login">Already have an account? Login instead.</Link>
@@ -99,7 +99,7 @@ function RegistrationViewWkOrg() {
   return (
     <Row justify="center" align="middle" className="login-view">
       <Col>
-        <Card className="login-content drawing-signup" style={{ width: 1000 }}>
+        <Card className="login-content drawing-signup" style={{ maxWidth: 1000 }}>
           <h3>Sign Up</h3>
           <RegistrationFormWKOrg
             onRegistered={() => {

frontend/javascripts/admin/auth/start_reset_password_view.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import { Link, RouteComponentProps, withRouter } from "react-router-dom";
 import { Form, Input, Button, Col, Row, Card } from "antd";
 import { MailOutlined } from "@ant-design/icons";
 import Request from "libs/request";
@@ -61,6 +61,7 @@ function StartResetPasswordView({ history }: Props) {
               </Button>
             </FormItem>
           </Form>
+          <Link to="/auth/login">Back to Login</Link>
         </Card>
       </Col>
     </Row>

frontend/javascripts/components/brain_spinner.tsx

@@ -106,7 +106,7 @@ export function CoverWithLogin({ onLoggedIn }: { onLoggedIn: () => void }) {
         }}
         align="middle"
       >
-        <Col span={8}>
+        <Col xs={22} sm={20} md={16} lg={12} xl={8}>
           <h3>Try logging in to view the dataset.</h3>
           <LoginForm layout="horizontal" onLoggedIn={onLoggedIn} />
         </Col>

frontend/javascripts/dashboard/dataset_folder_view.tsx

@@ -203,7 +203,7 @@ function DatasetFolderViewInner(props: Props) {
     <div
       style={{
         display: "grid",
-        gridTemplate: "auto / auto 1fr auto",
+        gridTemplate: "auto / auto minmax(60%, 1fr) auto",
         flexGrow: 1,
         minHeight: 0,
       }}
@@ -224,7 +224,7 @@ function DatasetFolderViewInner(props: Props) {
       >
         <FolderTreeSidebar setFolderIdForEditModal={setFolderIdForEditModal} />
       </div>
-      <main style={{ gridColumn: "2 / 2", overflow: "auto", paddingRight: 4 }}>
+      <main style={{ gridColumn: "2 / 3", overflow: "auto", paddingRight: 4 }}>
         <DatasetView
           user={props.user}
           onSelectDataset={setSelectedDataset}

frontend/stylesheets/main.less

@@ -618,7 +618,7 @@ button.narrow {
   }
 
   .login-content {
-    width: 600px;
+    max-width: 600px;
     padding: 80px;
 
     @media @smartphones {
@@ -652,7 +652,7 @@ button.narrow {
 }
 
 .task-annotation-view {
-  width: 31%
+  width: 31%;
 }
 
 .organization-switch-menu > ul {