mobile ; heading scroll broken

src/app/HeaderButtons.tsx

@@ -19,18 +19,30 @@ const InfoIcon = (
 
 export default function HeaderButtons() {
   return (
-    <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
-      <a href="/admin" target="_self" rel="noopener noreferrer">
+    <div className="flex gap-2 justify-center sm:justify-end">
+      <a 
+        href="/admin" 
+        target="_self" 
+        rel="noopener noreferrer"
+        className="h-6 sm:h-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+      >
         <img
           src="https://img.shields.io/badge/Admin%20Login-000000?style=for-the-badge&logo=lock&logoColor=white&labelColor=8B0000"
           alt="Admin Login"
+          className="h-6 sm:h-8"
         />
       </a>
       {/* If your server for about me is running on a different port, change the port number here */}
-      <a href={typeof window !== 'undefined' ? window.location.origin.replace('3000', '80') : '#'} target="_self" rel="noopener noreferrer">
+      <a 
+        href={typeof window !== 'undefined' ? window.location.origin.replace('3000', '80') : '#'} 
+        target="_self" 
+        rel="noopener noreferrer"
+        className="h-6 sm:h-8 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+      >
         <img
           src="https://img.shields.io/badge/About%20Me-000000?style=for-the-badge&logo=account&logoColor=white&labelColor=2563eb"
           alt="About Me"
+          className="h-6 sm:h-8"
         />
       </a>
     </div>