Feature/app 31 mobile view

Feature/app 31 mobile view

.dependency-cruiser.js

@@ -10,26 +10,26 @@ module.exports = {
         'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
       from: {},
       to: {
-        circular: true
-      }
+        circular: true,
+      },
     },
     {
       name: 'no-orphans',
       comment:
         "This is an orphan module - it's likely not used (anymore?). Either use it or " +
         "remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
-        "add an exception for it in your dependency-cruiser configuration. By default " +
-        "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
-        "files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
+        'add an exception for it in your dependency-cruiser configuration. By default ' +
+        'this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration ' +
+        'files (.d.ts), tsconfig.json and some of the babel and webpack configs.',
       severity: 'warn',
       from: {
         orphan: true,
         pathNot: [
           '(^|/)\\.[^/]+\\.(js|cjs|mjs|ts|json)$', // dot files
-          '\\.d\\.ts$',                            // TypeScript declaration files
-          '(^|/)tsconfig\\.json$',                 // TypeScript config
-          '(^|/)(babel|webpack)\\.config\\.(js|cjs|mjs|ts|json)$' // other configs
-        ]
+          '\\.d\\.ts$', // TypeScript declaration files
+          '(^|/)tsconfig\\.json$', // TypeScript config
+          '(^|/)(babel|webpack)\\.config\\.(js|cjs|mjs|ts|json)$', // other configs
+        ],
       },
       to: {},
     },
@@ -41,32 +41,30 @@ module.exports = {
       severity: 'warn',
       from: {},
       to: {
-        dependencyTypes: [
-          'core'
-        ],
+        dependencyTypes: ['core'],
         path: [
-          '^(v8\/tools\/codemap)$',
-          '^(v8\/tools\/consarray)$',
-          '^(v8\/tools\/csvparser)$',
-          '^(v8\/tools\/logreader)$',
-          '^(v8\/tools\/profile_view)$',
-          '^(v8\/tools\/profile)$',
-          '^(v8\/tools\/SourceMap)$',
-          '^(v8\/tools\/splaytree)$',
-          '^(v8\/tools\/tickprocessor-driver)$',
-          '^(v8\/tools\/tickprocessor)$',
-          '^(node-inspect\/lib\/_inspect)$',
-          '^(node-inspect\/lib\/internal\/inspect_client)$',
-          '^(node-inspect\/lib\/internal\/inspect_repl)$',
+          '^(v8/tools/codemap)$',
+          '^(v8/tools/consarray)$',
+          '^(v8/tools/csvparser)$',
+          '^(v8/tools/logreader)$',
+          '^(v8/tools/profile_view)$',
+          '^(v8/tools/profile)$',
+          '^(v8/tools/SourceMap)$',
+          '^(v8/tools/splaytree)$',
+          '^(v8/tools/tickprocessor-driver)$',
+          '^(v8/tools/tickprocessor)$',
+          '^(node-inspect/lib/_inspect)$',
+          '^(node-inspect/lib/internal/inspect_client)$',
+          '^(node-inspect/lib/internal/inspect_repl)$',
           '^(async_hooks)$',
           '^(punycode)$',
           '^(domain)$',
           '^(constants)$',
           '^(sys)$',
           '^(_linklist)$',
-          '^(_stream_wrap)$'
+          '^(_stream_wrap)$',
         ],
-      }
+      },
     },
     {
       name: 'not-to-deprecated',
@@ -76,26 +74,21 @@ module.exports = {
       severity: 'warn',
       from: {},
       to: {
-        dependencyTypes: [
-          'deprecated'
-        ]
-      }
+        dependencyTypes: ['deprecated'],
+      },
     },
     {
       name: 'no-non-package-json',
       severity: 'error',
       comment:
         "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
         "That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
-        "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
-        "in your package.json.",
+        'available on live with an non-guaranteed version. Fix it by adding the package to the dependencies ' +
+        'in your package.json.',
       from: {},
       to: {
-        dependencyTypes: [
-          'npm-no-pkg',
-          'npm-unknown'
-        ]
-      }
+        dependencyTypes: ['npm-no-pkg', 'npm-unknown'],
+      },
     },
     {
       name: 'not-to-unresolvable',
@@ -105,24 +98,24 @@ module.exports = {
       severity: 'error',
       from: {},
       to: {
-        couldNotResolve: true
-      }
+        couldNotResolve: true,
+      },
     },
     {
       name: 'no-duplicate-dep-types',
       comment:
         "Likely this module depends on an external ('npm') package that occurs more than once " +
-        "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
-        "maintenance problems later on.",
+        'in your package.json i.e. bot as a devDependencies and in dependencies. This will cause ' +
+        'maintenance problems later on.',
       severity: 'warn',
       from: {},
       to: {
         moreThanOneDependencyType: true,
-        // as it's pretty common to have a type import be a type only import 
+        // as it's pretty common to have a type import be a type only import
         // _and_ (e.g.) a devDependency - don't consider type-only dependency
         // types for this rule
-        dependencyTypesNot: ["type-only"]
-      }
+        dependencyTypesNot: ['type-only'],
+      },
     },
 
     /* rules you might want to tweak for your specific situation: */
@@ -135,8 +128,8 @@ module.exports = {
       severity: 'error',
       from: {},
       to: {
-        path: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$'
-      }
+        path: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$',
+      },
     },
     {
       name: 'not-to-dev-dep',
@@ -149,54 +142,47 @@ module.exports = {
         'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
       from: {
         path: '^(./)',
-        pathNot: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$'
+        pathNot: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$',
       },
       to: {
-        dependencyTypes: [
-          'npm-dev'
-        ]
-      }
+        dependencyTypes: ['npm-dev'],
+      },
     },
     {
       name: 'optional-deps-used',
       severity: 'info',
       comment:
-        "This module depends on an npm package that is declared as an optional dependency " +
+        'This module depends on an npm package that is declared as an optional dependency ' +
         "in your package.json. As this makes sense in limited situations only, it's flagged here. " +
         "If you're using an optional dependency here by design - add an exception to your" +
-        "dependency-cruiser configuration.",
+        'dependency-cruiser configuration.',
       from: {},
       to: {
-        dependencyTypes: [
-          'npm-optional'
-        ]
-      }
+        dependencyTypes: ['npm-optional'],
+      },
     },
     {
       name: 'peer-deps-used',
       comment:
-        "This module depends on an npm package that is declared as a peer dependency " +
-        "in your package.json. This makes sense if your package is e.g. a plugin, but in " +
-        "other cases - maybe not so much. If the use of a peer dependency is intentional " +
-        "add an exception to your dependency-cruiser configuration.",
+        'This module depends on an npm package that is declared as a peer dependency ' +
+        'in your package.json. This makes sense if your package is e.g. a plugin, but in ' +
+        'other cases - maybe not so much. If the use of a peer dependency is intentional ' +
+        'add an exception to your dependency-cruiser configuration.',
       severity: 'warn',
       from: {},
       to: {
-        dependencyTypes: [
-          'npm-peer'
-        ]
-      }
-    }
+        dependencyTypes: ['npm-peer'],
+      },
+    },
   ],
   options: {
-
     /* conditions specifying which files not to follow further when encountered:
        - path: a regular expression to match
        - dependencyTypes: see https://github.com/sverweij/dependency-cruiser/blob/master/doc/rules-reference.md#dependencytypes-and-dependencytypesnot
        for a complete list
     */
     doNotFollow: {
-      path: 'node_modules'
+      path: 'node_modules',
     },
 
     /* conditions specifying which dependencies to exclude
@@ -234,7 +220,7 @@ module.exports = {
        "specify": for each dependency identify whether it only exists before compilation or also after
      */
     tsPreCompilationDeps: true,
-    
+
     /* 
        list of extensions to scan that aren't javascript or compile-to-javascript. 
        Empty by default. Only put extensions in here that you want to take into
@@ -260,7 +246,7 @@ module.exports = {
        defaults to './tsconfig.json'.
      */
     tsConfig: {
-      fileName: 'tsconfig.json'
+      fileName: 'tsconfig.json',
     },
 
     /* Webpack configuration to use to get resolve options from.
@@ -309,8 +295,8 @@ module.exports = {
 
          If you have an `exportsFields` attribute in your webpack config, that one
          will have precedence over the one specified here.
-      */ 
-      exportsFields: ["exports"],
+      */
+      exportsFields: ['exports'],
       /* List of conditions to check for in the exports field. e.g. use ['imports']
          if you're only interested in exposed es6 modules, ['require'] for commonjs,
          or all conditions at once `(['import', 'require', 'node', 'default']`)
@@ -320,7 +306,7 @@ module.exports = {
         If you have a 'conditionNames' attribute in your webpack config, that one will
         have precedence over the one specified here.
       */
-      conditionNames: ["import", "require", "node", "default"],
+      conditionNames: ['import', 'require', 'node', 'default'],
       /*
          The extensions, by default are the same as the ones dependency-cruiser
          can access (run `npx depcruise --info` to see which ones that are in
@@ -339,7 +325,7 @@ module.exports = {
          this if you're not sure, but still use TypeScript. In a future version
          of dependency-cruiser this will likely become the default.
        */
-      mainFields: ["main", "types"],
+      mainFields: ['main', 'types'],
     },
     reporterOptions: {
       dot: {
@@ -440,10 +426,10 @@ module.exports = {
         // theme: {
         // },
       },
-      "text": {
-        "highlightFocused": true
+      text: {
+        highlightFocused: true,
       },
-    }
-  }
+    },
+  },
 };
 // generated: [email protected] on 2023-03-07T14:03:19.145Z

.prettierrc

@@ -1 +1 @@
-"@smartive/prettier-config"
+"@smartive/prettier-config"

next.config.js

@@ -20,4 +20,4 @@ module.exports = withPWA({
       },
     ],
   },
-})
+});

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/comment.tsx

@@ -95,13 +95,21 @@ export const CommentMumble: FC<CurrentUser> = ({ user, handleCommentChanged, sub
             ) : null}
           </form>
           <div className="flex flex-row gap-l justify-between unset">
-            <Button label="Bild hochladen" size="L" variant="default" isDisabled={isSubmitting} onClick={fileUploadClick}>
+            <Button
+              label="Bild hochladen"
+              size="L"
+              variant="default"
+              hideLabelMobile={true}
+              isDisabled={isSubmitting}
+              onClick={fileUploadClick}
+            >
               <UploadIcon size={16} />
             </Button>
             <Button
               label="Absenden"
               size="L"
               variant="purple"
+              hideLabelMobile={true}
               isDisabled={isSubmitting || !(!!form.file || !!form.comment)}
               onClick={submitComment}
             >

src/components/modal-file-upload.tsx

@@ -48,7 +48,7 @@ export const ModalFileUpload: React.FC<ModalFileUpload> = ({ title, isOpen, onCl
   };
 
   return (
-    <div className={'absolute w-355 h-[400px]'}>
+    <div className={'absolute h-[400px]'}>
       <Modal title={title} isOpen={isOpen} onClose={() => onAbort()}>
         <div>
           <FileUpload

src/components/mumble-list.tsx

@@ -62,7 +62,7 @@ export const MumbleList: FC<MumbleList> = ({ mumbles, users, totalMumbles, mumbl
               </li>
             )}
             {state.mumbles.map((mumble: Mumble) => (
-              <li key={mumble.id} className={'m-s'}>
+              <li key={mumble.id} className={'m-s md:mx-none'}>
                 <Card borderType={BorderType.rounded}>
                   <MumbleCard mumble={mumble}></MumbleCard>
                 </Card>