Improve the layout on a phone

[Ondřej Čertík]

On my iPhone, the site works, but I can only see the code window, I have to scroll down to see the output. So people might not realize there is an image output.

[Shaikh Ubaid]

lcompilers_frontend/pages/index.js

Lines 59 to 67 in 4bea658

 useEffect(() => { 
     const updateMyHeight = () => { 
         const minHeightWidht = (window.innerWidth < window.innerHeight) ? window.innerWidth - 40 : window.innerHeight - 182; 
         setMyHeight(minHeightWidht); 
     } 
     window.addEventListener("resize", updateMyHeight); 
     updateMyHeight(); 
     return () => window.removeEventListener("resize", updateMyHeight) 
 }, []) 

It seems we might need a useEffect() to accomplish this. We previous had this useEffect as shown above.

Also, I came across this https://stackoverflow.com/questions/59494037/how-to-detect-the-device-on-react-ssr-app-with-next-js. It seems useful.

[Ondřej Čertík]

This is how it looks like on my iPhone now:

So I think the issue is fixed. Thanks a lot @Shaikh-Ubaid for fixing it!