fix on mobile

jaroslaw-weber · May 17, 2024 · c7ba361 · c7ba361
1 parent 67ffa1b
commit c7ba361
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -6,9 +6,11 @@ const Navbar = () => {
     <div className="w-full bg-base-100 flex-shrink ">
       <div className="navbar  mx-auto bg-primary text-primary-content shadow">
         <div className="flex-1">
-          <Link href="/" className="btn btn-ghost normal-case font-display text-xl">
-          algo-lens: see algorithms in action! 
-          </Link>
+        <Link href="/" className="btn btn-ghost normal-case font-display text-xl">
+  <span className="hidden sm:inline">algo-lens: see algorithms in action!</span>
+  <span className="inline sm:hidden">algo-lens</span>
+</Link>
+
         </div>
         <div className="flex-none">
           <ul className="menu menu-horizontal p-0">

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -12,7 +12,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     document.documentElement.setAttribute("data-theme", theme);
   });
   return (
-    <div className="min-h-screen w-full font-sans flex flex-col bg-base-100 items-center">
+    <div className="min-h-screen overflow-x-hidden w-full font-sans flex flex-col bg-base-100 items-center">
       <Head>
         <title>Algo-Lens: Algorithm Visualization Tool</title>
         <meta
@@ -25,6 +25,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
         />
       </Head>
+
       <Navbar />
       <Component {...pageProps} />
     </div>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,7 +12,7 @@ const Home: NextPage = () => {
   }, []);
 
   return (
-    <div className="flex-grow flex w-full">
+    <div className="flex-grow flex w-full ">
 
 
       <main className="lg:mx-12 w-full mx-auto">