Merge pull request #509 from Utsavladia/tablet-overlap

Fixed the sizing for tablet screen size
singodiyashubham87 · Aug 1, 2024 · 9ba6b31 · 9ba6b31
2 parents def97a8 + 455f413
commit 9ba6b31
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "fabric": "^5.3.0",
     "gapi-script": "^1.2.0",
     "jspdf": "^2.5.1",

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -137,7 +137,7 @@ function Home() {
                 <div className="flex flex-col min-w-full justify-center gsm:flex-column">
                     <div className="relative flex flex-col justify-between mt-[0.5vh] items-center font-primary">
                         {/* Drawing Toolbar */}
-                        <div className="flex flex-col md:flex-row justify-between lg:justify-center items-center gap-10 w-full">
+                        <div className="flex flex-col md:flex-row justify-between md:justify-start lg:justify-center items-center lg:gap-10 md:gap-4 gap-10 w-full">
                             {showMenuAndBgColor && (
                                 <Menu
                                     isDrawing={isDrawing}
@@ -155,7 +155,7 @@ function Home() {
                                 />
                             )}
                             {/* Toolbar right menu section */}
-                            <div className="flex flex-row justify-center align-center items-center md:absolute top-0 md:right-4 right-2">
+                            <div className="flex flex-row justify-center align-center items-center md:absolute top-2 md:right-2 right-2">
                                 {/* Eye button */}
                                 <div
                                     className={`bg-[#CBCCCF] scale-[0.7] p-[1rem] text-[1.5rem] w-80% rounded-[50%] shadow-black shadow-md transform transition duration-300 ease-in-out text-black hover:bg-gray-400 cursor-pointer dark:bg-slate-800 dark:text-[#ffffff] hover:md:scale-[0.8] ${!showMenuAndBgColor && "mt-10"
@@ -213,7 +213,7 @@ function Home() {
                         <div className="flex justify-center items-center w-full h-full flex-grow">
                             <canvas
                                 id="draw"
-                                className={`whiteboard bg-slate-950 mt-[4vh] rounded-[0.6rem] shadow-md shadow-black dark:shadow-black dark:shadow-lg ${isDrawing
+                                className={`whiteboard bg-slate-950 max-w-full mt-[4vh] rounded-[0.6rem] shadow-md shadow-black dark:shadow-black dark:shadow-lg ${isDrawing
                                     ? "cursor-pointer"
                                     : "cursor-default pointer-events-none"
                                     }`}

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
@@ -171,7 +171,7 @@ const Menu = ({
 
   return (
     <>
-      <div id="toolbar" className="scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap">
+      <div id="toolbar" className="md:scale-[0.7] lg:scale-[0.8] scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center md:justify-start lg:justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap">
         <Brush
           isDropdownOpen={isDropdownOpen}
           toggleDropdown={toggleDropdown}

diff --git a/src/components/Team/Contributor.jsx b/src/components/Team/Contributor.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-
+import axios from 'axios'
 // Replace these with the actual repository owner and name
 const REPO_OWNER = 'singodiyashubham87';
 const REPO_NAME = 'Draw-it-out';