feat: reset app position

Author: geekdada

src/pages/Content/components/App/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import Draggable, { DraggableEventHandler } from 'react-draggable'
 import cc from 'chrome-call'
 // @ts-ignore
@@ -20,6 +20,22 @@ const App: React.FC = () => {
  const [close, setClose] = useState(false)
  const dispatch = useTranslateJobsDispatch()
 
+ const appPosition = useMemo(() => {
+ const vw = Math.max(
+ document.documentElement.clientWidth || 0,
+ window.innerWidth || 0,
+ )
+ const vh = Math.max(
+ document.documentElement.clientHeight || 0,
+ window.innerHeight || 0,
+ )
+
+ return {
+ x: vw - 450 - 20,
+ y: vh - 600 - 20,
+ }
+ }, [])
+
  const onNewJob = useCallback(
  (job: TranslateJob) => {
  logger.debug({
@@ -72,7 +88,7 @@ const App: React.FC = () => {
  <Draggable
  handle=".ate_App__header"
  onStart={onDragStart}
- defaultPosition={{ x: 20, y: 20 }}>
+ defaultPosition={appPosition}>
  <div className={clsx(['ate_App', close && 'ate_App--inactive'])}>
  <div className="ate_App__header">
  <span>A Translator</span>

src/pages/Content/styles/index.scss

@@ -39,6 +39,8 @@
  height: 25px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
+
+ @apply rounded;
 }
 
 #ate-icon.active {