ui fixes

Author: mythz

MyApp.Client/src/App.tsx

@@ -49,9 +49,8 @@ function App() {
             <div className="mb-8 flex items-center space-x-4">
             {user
                 ? (<>
-                    <Link to="/profile"
-                            className="max-w-xs rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50 dark:lg:hover:bg-gray-900 dark:ring-offset-black"
-                            id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+                    <Link to="/profile" className="max-w-xs rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50 dark:lg:hover:bg-gray-900 dark:ring-offset-black"
+                          id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                         <img className="h-8 w-8 rounded-full" src={user.profileUrl} alt="User Profile"/>
                         <span className="hidden ml-3 text-gray-700 dark:text-gray-300 text-sm font-medium lg:block">
                             {user.userName}

MyApp.Client/src/components/Page.tsx

@@ -12,8 +12,8 @@ const Page: FC<Props> = ({ title, className, bodyClass, children }) => {
     <>
       <div className="min-h-screen">
         <main>
-          <div className={`max-w-7xl mx-auto px-5 ${className ?? ''}`}>
-            <div className={bodyClass ?? 'max-w-5xl'}>
+          <div className={`px-5 ${className ?? ''}`}>
+            <div className={bodyClass ?? ''}>
               <h1 className="text-center text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">{title}</h1>
               {children}
             </div>