From 6742fe0a4aa69ff8522c145df2ac4a3c8e03184f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 23 Jan 2025 14:15:54 +0100
Subject: [PATCH] =?UTF-8?q?Tabelle=20in=20Laptop=20ohne=20Scrollbalkenmit?=
 =?UTF-8?q?=20gap-0=20in=20dashboard=20=20in=20W=C3=BCrzel-Element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Footer.jsx |  2 +-
 components/Header.jsx |  2 +-
 pages/dashboard.js    | 21 +++++++++++----------
 tailwind.config.js    |  4 ++--
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index a8432de..af4d339 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -52,7 +52,7 @@ function Footer() {
   }, [showSlider]);
 
   return (
-    <footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black laptop:h-[7vh] ">
+    <footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black laptop:h-[5vh] ">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2">
           <Icon
diff --git a/components/Header.jsx b/components/Header.jsx
index e2a43d6..b31a66f 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -49,7 +49,7 @@ function Header() {
   }, [isAdminLoggedIn]);
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] relative text-black ">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
       <div
         className="absolute transform -translate-y-1/2 
                 left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]
diff --git a/pages/dashboard.js b/pages/dashboard.js
index 24eb0e2..e23458a 100644
--- a/pages/dashboard.js
+++ b/pages/dashboard.js
@@ -63,7 +63,7 @@ function Dashboard() {
       baugruppen.push(
         <div
           key={i}
-          className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 lg:mb-0  border border-gray-200 w-full"
+          className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 lg:mb-0  border border-gray-200 w-full laptop:scale-y-75 xl:scale-y-90"
         >
           <div className="flex gap-1">
             {slots.map((version, index) => {
@@ -100,7 +100,7 @@ function Dashboard() {
   };
 
   return (
-    <div className="flex flex-col gap-4 p-4 h-[calc(100vh-13vh-8vh)]">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1  ">
           <Icon
@@ -113,9 +113,9 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-1 overflow-hidden ">
-        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow ">
-          <table className="min-w-full border border-gray-200 text-left ">
+      <div className="flex flex-col lg:flex-row gap-0 overflow-hidden  ">
+        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
+          <table className="min-w-full border border-gray-200 text-left table-fixed ">
             <thead className="bg-gray-100 border-b border-gray-300">
               <tr>
                 <th className="py-1 px-4 text-gray-700 text-sm font-medium">
@@ -135,12 +135,13 @@ function Dashboard() {
                 </th>
               </tr>
             </thead>
-            <tbody className="text-xs text-gray-600 flex-shrink-0">
+
+            <tbody className="text-xs text-gray-600  laptop:text-xs flex-shrink-0  ">
               {last20Messages.length > 0 ? (
                 last20Messages.map((columns, index) => (
                   <tr
                     key={index}
-                    className="border-b border-gray-200 hover:bg-gray-50"
+                    className="border-b border-gray-200 hover:bg-gray-50 "
                   >
                     <td className="px-4 w-1/7">{columns[0]}</td>
                     <td className="px-4 w-1/7">{columns[1]}</td>
@@ -176,7 +177,7 @@ function Dashboard() {
               Versionsinformationen
             </h2>
 
-            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
+            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2 laptop:p-0 xl:p-0">
               <Icon
                 icon="bx:code-block"
                 className="text-xl 2xl:text-xl xl:text-base text-blue-400"
@@ -187,7 +188,7 @@ function Dashboard() {
               </p>
             </div>
 
-            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
+            <div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2 laptop:p-0 xl:p-0">
               <Icon
                 icon="mdi:web"
                 className="text-xl lg:text-base text-blue-400"
@@ -202,7 +203,7 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 ">
+      <div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200  laptop:m-0 laptop:scale-y-75">
         <div className="flex items-center space-x-4">
           <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 " />
           <div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 550d43d..14d21af 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,12 +15,12 @@ module.exports = {
         md: "768px",
         lg: "1024px",
         xl: "1280px",
-        laptop: "1348px",
+        laptop: "1350px",
         "2xl": "1600px",
         "3xl": "1920px",
       },
       height: {
-        laptop: "635px", // Benutzerdefinierte Höhe für Laptop
+        laptop: "688px", // Benutzerdefinierte Höhe für Laptop
       },
     },
   },