Merge pull request #509 from Utsavladia/tablet-overlap

Fixed the sizing for tablet screen size

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",

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"
  }`}

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}

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';