Changed the Welcome Message to Welcome to The Admin Portal instead of the Welcome to The Admin Page message. Added Hover effect for the _Content_ Section and made it scrollable horizontally to make large tables visible.

Author: yehiarasheed

WebApplication2/Customer/Pages/CustomerComponent.aspx

@@ -178,7 +178,7 @@
             margin-right:  15px;
             font-weight:500;
         }
-            .dark-mode .number-box {
+        .dark-mode .number-box {
             background-color: #4fa3d1;
             color: black;
             padding: 15px 20px;
@@ -258,7 +258,7 @@
             color:black;
         }
 
-                /* Styled TextBox */
+        /* Styled TextBox */
         .styled-textbox {
             width: 300px;
             padding: 10px;

WebApplication2/Pages/Home/Home.aspx

@@ -3,7 +3,7 @@
     Admin Page
 </asp:Content>
 <asp:Content ID="Content3" ContentPlaceHolderID="Header" runat="server">
-    <h1>Welcome to the Admin Page </h1>
+    <h1>Welcome to the Admin Portal </h1>
 </asp:Content>
 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

WebApplication2/Styles/site.css

@@ -27,11 +27,22 @@ form,
 }
 
 .content {
+    flex: 1;
     margin: 0;
     padding: 20px;
     background-color: white;
     border-radius: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    flex-direction: column; /* Ensure the content area expands with its children */
+    overflow: auto;
+    min-width: 0; /* Ensure the content area can shrink if needed */
+}
+
+
+.content:hover {
+    box-shadow: 0 4px 20px rgba(80, 80, 80, 0.6);
 }
 
 .content h1 {
@@ -76,7 +87,7 @@ h1 {
 /* GridView styles */
 .grid-view {
     width: 100%;
-    border-collapse: separate;
+    border-collapse: collapse;
     /* Separate to apply border radius */
     border-spacing: 0;
     background-color: white;
@@ -85,7 +96,7 @@ h1 {
     overflow: hidden;
     /* Apply rounded corners */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    table-layout: fixed;
+    /* table-layout: fixed; */
     /* Ensure that table columns evenly distribute the space */
 }
 
@@ -94,14 +105,14 @@ h1 {
     padding: 10px 12px;
     text-align: center;
     border: 1px solid #ddd;
-    word-wrap: break-word;
+    /*word-wrap: break-word;*/
 }
 
 .grid-view th {
     background-color: #212121;
     /* Dark blue header */
     color: white;
-    word-wrap: normal;
+   /* word-wrap: normal; */
 }
 
 .grid-view tr:nth-child(even) {
@@ -180,13 +191,13 @@ h1 {
 
 }
 
-    #sidebar li.active a {
-        /* Or any other styling you prefer */
-        background-color: #C2185B;
-        /* Light gray background */
-        color: #fff;
-        /* Darker text color for contrast */
-    }
+#sidebar li.active a {
+    /* Or any other styling you prefer */
+    background-color: #C2185B;
+    /* Light gray background */
+    color: #fff;
+    /* Darker text color for contrast */
+}
 
 #sidebar i {
     font-size: 1.2em;