1 files changed, 11 insertions, 7 deletions
diff --git a/components/App.js b/components/App.js
index 59fd5a0..210e0e0 100644
--- a/components/App.js
+++ b/components/App.js
@@ -1,10 +1,14 @@
 import React, {useEffect, useRef} from 'react'
+import useSettings from 'hooks/useSettings'
+import useMediaQuery from 'hooks/useMediaQuery'
 import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
 import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
 const App = ({children, app, setApps}) => {
+  const {t} = useSettings()
   const winRef = useRef(null);
+  const forceMax = useMediaQuery(`(max-width: ${app.width}) or (max-height: ${app.height})`);
 
   useEffect(() => {
     move(app.name, winRef, setApps)
@@ -17,20 +21,20 @@ const App = ({children, app, setApps}) => {
         className={
           'window'
           + (app.min ? ' hidden' : '')
-          + (app.max ? ' maximized' : '')
+          + (app.max || forceMax ? ' maximized' : '')
         }
         style={{
-          maxHeight: app.height,
-          maxWidth: app.width,
+          height: app.height,
+          width: app.width,
           ...app.pos.length
             ? {top: app.pos[1], left: app.pos[0]}
             : {
-                // top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
-                // left: `calc(( 100vw - ${app.width} ) / 2)`,
+                top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
+                left: `calc(( 100vw - ${app.width} ) / 2)`,
             }
         }}
       >
-        <h2 className='window__title'>{app.name}</h2>
+        <h2 className='window__title'>{t(app.name)}</h2>
         <div className='window__content'>{children}</div>
         <div className='window__title-buttons'>
           { app.buttons.includes('min') && (
@@ -38,7 +42,7 @@ const App = ({children, app, setApps}) => {
               <FontAwesomeIcon icon={faArrowUp} />
             </span>
           )}
-          { app.buttons.includes('max') && (
+          { app.buttons.includes('max') && !forceMax && (
             <span onClick={() => toggleMax(app.name, setApps)}>
               <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
             </span>