Extend max width for large screen

Author: Pascal Wegner

packages/pwa/src/components/Counter/Counter.tsx

@@ -34,13 +34,13 @@ export function Counter({
   const stepLength = 1 - timeLeftAdvancedByOneInSeconds / timeTotalInSeconds;
 
   const counterDesktop = (
-    <div className="h-full w-full lg:max-w-screen-md hidden lg:flex justify-between flex-col items-center">
+    <div className="h-full w-full lg:max-w-screen-xl hidden lg:flex justify-between flex-col items-center">
       <div className="w-full flex">
         <div className="h-20 w-full flex justify-end items-center px-6">
           <ThemeToggle />
         </div>
       </div>
-      <div className="flex flex-col justify-between w-full h-3/6 items-center relative">
+      <div className="flex flex-col lg:max-w-screen-md justify-between w-full h-3/6 items-center relative">
         <div className="flex flex-1 flex-col items-center z-[1]">
           <span className="text-blue-600 text-3xl tracking-wider">ROUND</span>
           <span

packages/pwa/src/components/Form/Form.tsx

@@ -21,7 +21,7 @@ export const Form = ({
   workInterval,
 }: FormProps) => {
   return (
-    <div className="h-full w-full flex max-w-screen-md justify-center flex-col items-center">
+    <div className="h-full w-full flex max-w-screen-xl justify-center flex-col items-center">
       <div className="flex-[0.75] w-full flex">
         <div className="h-20 w-full flex justify-end items-center px-6">
           <ThemeToggle />