on mobile view the app used to launch with nav bar open, this fixes it.

About page had same large horizontal margin which made about page very
narrow. This fixes it.

frontend/src/About.tsx

@@ -4,7 +4,7 @@
 export default function About() {
   return (
     //Parent div for all content shown through App.tsx routing needs to have this styling. Might change when state management is updated.
-    <div className="mx-36 grid min-h-screen">
+    <div className="mx-5 grid min-h-screen md:mx-36">
       <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
         <p className="text-3xl">About DocsGPT 🦖</p>
         <p className="mt-4">

frontend/src/App.tsx

@@ -6,7 +6,10 @@ import { useState } from 'react';
 import { ActiveState } from './models/misc';
 
 export default function App() {
-  const [navState, setNavState] = useState<ActiveState>('ACTIVE');
+  //TODO : below media query is disjoint from tailwind. Please wire it together.
+  const [navState, setNavState] = useState<ActiveState>(
+    window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE',
+  );
 
   return (
     <div className="min-h-full min-w-full">