fixed firebase auth blocking screen on mobile

Author: Llewellyn500

app/[...not_found]/page.tsx

@@ -125,7 +125,7 @@ export default function ArticlesPage() {
   };
 
   return (
-    <div className="min-h-screen text-white overflow-x-hidden ">
+    <div className="min-h-screen text-white overflow-x-hidden w-full">
       {/* Header */}
       <div className="w-full px-4">
         <div className="mt-10 md:-mt-8">

app/admin/articles/page.tsx

@@ -104,7 +104,7 @@ export default function AdminDashboardPage() {
               <p className="text-xl">{articlesCount}</p>
             </div>
             <div className="p-4 border border-white">
-              <h2 className="text-lg font-bold">Team</h2>
+              <h2 className="text-lg font-bold">Members</h2>
               <p className="text-xl">{teamCount}</p>
             </div>
             <div className="p-4 border border-white">

app/admin/page.tsx

@@ -79,7 +79,7 @@ export default function ProfilePage() {
   };
 
   return (
-    <div className="ml-0 md:ml-3">
+    <div className="ml-0 md:ml-3 mt-10 md:-mt-8">
       <PageTitle
         className="sr-only"
         imgSrc="/images/titles/profile.svg"

app/admin/profile/page.tsx

@@ -47,7 +47,7 @@ export default function TeamPage() {
 
   return (
     <div>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-between items-center mb-4 mt-10 md:-mt-8">
         <PageTitle
           className="sr-only"
           imgSrc="/images/titles/team.svg"

app/admin/team/page.tsx

@@ -1,6 +1,10 @@
 @import "tailwindcss";
 @import url("https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.min.css");
 
+iframe[aria-hidden="true"] {
+  display: none !important;
+}
+
 
 @layer base {
   :root {
@@ -185,65 +189,63 @@ select:-webkit-autofill {
   background-color: #7b26ca;
 }
 
-/* Keep existing CSS code and add/modify these styles */
-
-/* Remove the all: revert !important; which is causing problems */
+/* Markdown Styles */
 .markdown-body {
-  color: #c9d1d9 !important;
-  padding: 20px !important;
+  color: #fff !important;
 }
 
-/* Add specific styling for markdown elements */
+/* Heading */
 .markdown-body h1 {
-  font-size: 2em !important;
+  font-weight: 600;
+  font-size: clamp(3rem, 2.7857rem + 1.0714vw, 4.5rem);
   margin-bottom: 0.5em !important;
-  color: #fff !important;
-  border-bottom: 1px solid #30363d !important;
-  padding-bottom: 0.3em !important;
+  border-bottom: 1px solid #ffffff5b !important;
+  padding-bottom: 0.1em !important;
 }
 
 .markdown-body h2 {
-  font-size: 1.5em !important;
+  font-size: clamp(2.2rem, 2.0857rem + 0.6714vw, 3.3rem);
+  font-weight: 600;
   margin-bottom: 0.5em !important;
-  color: #fff !important;
-  border-bottom: 1px solid #30363d !important;
+  border-bottom: 1px solid #ffffff5b !important;
   padding-bottom: 0.3em !important;
 }
 
 .markdown-body h3 {
-  font-size: 1.25em !important;
-  margin-bottom: 0.5em !important;
-  color: #fff !important;
-}
-
-.markdown-body h4 {
-  font-size: 1em !important;
+  font-size: clamp(1.9rem, 1.8857rem + 0.4714vw, 2.8rem);
+  font-weight: 600;
   margin-bottom: 0.5em !important;
-  color: #fff !important;
 }
 
-.markdown-body ul, 
-.markdown-body ol {
-  padding-left: 2em !important;
-  margin-bottom: 1em !important;
+/* Bold Text */
+.markdown-body strong,
+.markdown-body b {
+  font-weight: 700;
 }
 
-.markdown-body li {
-  margin: 0.25em 0 !important;
-  list-style-type: disc !important;
+/* Italic Text */
+.markdown-body em,
+.markdown-body i {
+  font-style: italic;
 }
 
-.markdown-body ol li {
-  list-style-type: decimal !important;
+/* Horizontal Rule */
+.markdown-body hr {
+  border: 0;
+  height: 1px;
+  background: #ffffff5b;
+  margin: 1.5em 0;
 }
 
-.markdown-body code {
-  background-color: #161b22 !important;
-  padding: 0.2em 0.4em !important;
-  border-radius: 3px !important;
-  font-family: monospace !important;
+/* Blockquote */
+.markdown-body blockquote {
+  padding: 0 1em !important;
+  color: #eeeeee !important;
+  border-left: 0.25em solid #30363d !important;
+  margin-bottom: 1em !important;
 }
 
+/* Code Block */
 .markdown-body pre {
   background-color: #161b22 !important;
   padding: 16px !important;
@@ -257,15 +259,122 @@ select:-webkit-autofill {
   padding: 0 !important;
 }
 
-.markdown-body blockquote {
-  padding: 0 1em !important;
-  color: #8b949e !important;
-  border-left: 0.25em solid #30363d !important;
+/* Inline Code */
+.markdown-body code {
+  background-color: #161b22 !important;
+  padding: 0.2em 0.4em !important;
+  border-radius: 3px !important;
+  font-family: monospace !important;
+}
+
+/* Ordered and Unordered Lists */
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 2em !important;
   margin-bottom: 1em !important;
 }
 
+.markdown-body li {
+  margin: 0.25em 0 !important;
+  list-style-type: disc !important;
+}
+
+.markdown-body ol li {
+  list-style-type: decimal !important;
+}
+
+/* Paragraph */
 .markdown-body p {
-  margin-bottom: 1em !important;
+  font-weight: 300;
+  font-size: 1.15rem;
+  margin-bottom: 1rem;
+}
+
+/* Links */
+.markdown-body a {
+  color: #fff;
+  font-weight: 500;
+  text-decoration: none;
+  border-bottom: #fff 1px solid;
+  transition: all 0.3s;
+}
+
+.markdown-body a:hover {
+  color: #8a2be2;
+  text-decoration: none;
+}
+
+/* Checkbox (for task lists) */
+.markdown-body input[type="checkbox"] {
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+/* Table */
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1em;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid #ffffff5b;
+  padding: 0.5em;
+  text-align: left;
+}
+
+.markdown-body th {
+  font-weight: 600;
+  background-color: #161b22;
+}
+
+/* Custom ID Headings */
+.markdown-body h1[id],
+.markdown-body h2[id],
+.markdown-body h3[id] {
+  position: relative;
+}
+
+.markdown-body h1[id]::after,
+.markdown-body h2[id]::after,
+.markdown-body h3[id]::after {
+  content: "#" attr(id);
+  font-size: 0.8em;
+  color: #ffffff5b;
+  margin-left: 0.5em;
+  text-decoration: none;
+}
+
+/* Footnote */
+.markdown-body .footnote {
+  font-size: 0.9em;
+  color: #bbb;
+  margin-top: 1em;
+}
+
+/* Highlight */
+.markdown-body mark {
+  background-color: #892be280;
+  color: #fff;
+  padding: 0.2em;
+}
+
+/* Subscript */
+.markdown-body sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+/* Superscript */
+.markdown-body sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+.markdown-body [id]::before {
+  content: attr(id);
+  display: none;
 }
 
 iframe {
@@ -275,9 +384,8 @@ iframe {
   margin-bottom: 4rem;
   margin-top: 4rem;
 }
-
-/* @media (max-width: 768px) {
+@media (max-width: 768px) {
   iframe {
     height: 14rem !important;
   }
-} */
+}

app/globals.css

@@ -6,6 +6,13 @@ export const metadata: Metadata = {
   description: "Getting things done on L.A.P Docs",
 };
 
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  viewportFit: "cover",
+};
+
 export default function RootLayout({
   children,
 }: {

app/layout.tsx

@@ -58,7 +58,7 @@ export default function AdminSidebar() {
               initial={{ opacity: 0 }}
               animate={{ opacity: 0.5 }}
               exit={{ opacity: 0 }}
-              className="fixed md:hidden top-0 left-0 w-full h-screen bg-black z-30"
+              className="fixed md:hidden top-0 left-0 w-full h-screen  z-30"
               onClick={() => setIsOpen(false)}
             />
 
@@ -68,7 +68,7 @@ export default function AdminSidebar() {
               initial="hidden"
               animate="visible"
               exit="exit"
-              className="fixed top-0 left-0 z-40 w-60 border-r border-white p-4 flex flex-col h-screen bg-black"
+              className="fixed top-0 left-0 z-40 w-60 border-r border-white p-4 flex flex-col h-screen "
             >
               <div>
                 {/* Logo (centered and rounded) */}
@@ -120,7 +120,7 @@ export default function AdminSidebar() {
               {/* Sign Out button at the bottom */}
               <button
                 onClick={handleSignOut}
-                className="mt-auto py-3 font-semibold text-center mb-5 transition ease-in-out duration-300"
+                className="mt-auto py-3 font-semibold text-center mb-19 md:mb-7 transition ease-in-out duration-300"
               >
                 Sign Out
               </button>