From 38b14c99f1bb02a5827d04aecd0cbcf47e8eb2ef Mon Sep 17 00:00:00 2001
From: CyferShepard <govenderthegan@gmail.com>
Date: Sat, 4 Jan 2025 22:58:44 +0200
Subject: [PATCH] css fixes for overflown text on item stat cards

---
 .../components/activity/activity-table.jsx    |  1 +
 .../statCards/ItemStatComponent.jsx           | 17 ++--
 src/pages/css/items/item-stat-component.css   |  5 +
 src/pages/css/statCard.css                    | 96 +++++++++----------
 4 files changed, 63 insertions(+), 56 deletions(-)
 create mode 100644 src/pages/css/items/item-stat-component.css

diff --git a/src/pages/components/activity/activity-table.jsx b/src/pages/components/activity/activity-table.jsx
index ff0473a..8afbb04 100644
--- a/src/pages/components/activity/activity-table.jsx
+++ b/src/pages/components/activity/activity-table.jsx
@@ -300,6 +300,7 @@ export default function ActivityTable(props) {
     enableExpandAll: false,
     enableExpanding: true,
     enableDensityToggle: false,
+    enableFilters: false,
     onSortingChange: handleSortingChange,
     enableTopToolbar: Object.keys(rowSelection).length > 0,
     manualPagination: true,
diff --git a/src/pages/components/statCards/ItemStatComponent.jsx b/src/pages/components/statCards/ItemStatComponent.jsx
index 012ac2c..506ed66 100644
--- a/src/pages/components/statCards/ItemStatComponent.jsx
+++ b/src/pages/components/statCards/ItemStatComponent.jsx
@@ -7,6 +7,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Tooltip from "@mui/material/Tooltip";
 import ArchiveDrawerFillIcon from "remixicon-react/ArchiveDrawerFillIcon";
+import "../../css/items/item-stat-component.css";
 
 function ItemStatComponent(props) {
   const [loaded, setLoaded] = useState(false);
@@ -36,8 +37,8 @@ function ItemStatComponent(props) {
   return (
     <Card className="stat-card rounded-2" style={cardStyle}>
       <div style={cardBgStyle} className="rounded-2">
-        <Row className="h-100 rounded-2">
-          <Col className="d-none d-lg-block stat-card-banner">
+        <Row className="row-max-witdh rounded-2 no-gutters">
+          <Col className="d-none d-lg-block stat-card-banner px-0">
             {props.icon ? (
               <div className="stat-card-icon">{props.icon}</div>
             ) : (
@@ -80,7 +81,7 @@ function ItemStatComponent(props) {
               </>
             )}
           </Col>
-          <Col className="w-100">
+          <Col className="stat-card-details px-0">
             <Card.Body className="w-100">
               <Card.Header className="d-flex justify-content-between border-0 p-0 bg-transparent">
                 <div>
@@ -98,30 +99,30 @@ function ItemStatComponent(props) {
                       {item.UserId ? (
                         <Link to={`/users/${item.UserId}`} className="item-name">
                           <Tooltip title={item.Name}>
-                            <Card.Text>{item.Name}</Card.Text>
+                            <Card.Text className="item-text">{item.Name}</Card.Text>
                           </Tooltip>
                         </Link>
                       ) : !item.Client && !props.icon ? (
                         <Link to={`/libraries/item/${item.Id}`} className="item-name">
                           <Tooltip title={item.Name}>
-                            <Card.Text>{item.Name}</Card.Text>
+                            <Card.Text className="item-text">{item.Name}</Card.Text>
                           </Tooltip>
                         </Link>
                       ) : !item.Client && props.icon ? (
                         item.Id ? (
                           <Link to={`/libraries/${item.Id}`} className="item-name">
                             <Tooltip title={item.Name}>
-                              <Card.Text>{item.Name}</Card.Text>
+                              <Card.Text className="item-text">{item.Name}</Card.Text>
                             </Tooltip>
                           </Link>
                         ) : (
                           <Tooltip title={item.Name}>
-                            <Card.Text>{item.Name}</Card.Text>
+                            <Card.Text className="item-text">{item.Name}</Card.Text>
                           </Tooltip>
                         )
                       ) : (
                         <Tooltip title={item.Client}>
-                          <Card.Text>{item.Client}</Card.Text>
+                          <Card.Text className="item-text">{item.Client}</Card.Text>
                         </Tooltip>
                       )}
                     </div>
diff --git a/src/pages/css/items/item-stat-component.css b/src/pages/css/items/item-stat-component.css
new file mode 100644
index 0000000..24c0a8a
--- /dev/null
+++ b/src/pages/css/items/item-stat-component.css
@@ -0,0 +1,5 @@
+.overflow-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/pages/css/statCard.css b/src/pages/css/statCard.css
index 29dc651..1f75850 100644
--- a/src/pages/css/statCard.css
+++ b/src/pages/css/statCard.css
@@ -1,52 +1,66 @@
-@import './variables.module.css';
-.grid-stat-cards
-{
+@import "./variables.module.css";
+.grid-stat-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(auto, 520px));
-  grid-auto-rows: 200px;/* max-width+offset so 215 + 20*/
+  grid-auto-rows: 200px; /* max-width+offset so 215 + 20*/
   margin-top: 8px;
   background-color: var(--secondary-background-color);
   border-radius: 8px;
   padding: 20px;
 }
-.stat-card{
+.stat-card {
   border: 0 !important;
-  background-color: var(--background-color)!important;
+  background-color: var(--background-color) !important;
   color: white;
   max-width: 500px;
   max-height: 180px;
 }
 
-.stat-card-banner
-{
+.no-gutters {
+  --bs-gutter-x: 0 !important; /* Remove horizontal gutter */
+  --bs-gutter-y: 0 !important; /* Remove vertical gutter if needed */
+}
+
+.row-max-witdh {
+  max-width: 500px;
+}
+
+.stat-card-banner {
   max-width: 120px !important;
 }
 
+.stat-card-details {
+  max-width: 380px !important;
+}
+
 .stat-card-image-audio {
   width: 120px !important;
   top: 15%;
   position: relative;
 }
 
+.item-text {
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .stat-card-image {
   width: 120px !important;
   height: 180px;
 }
 
-.stat-card-icon
-{
+.stat-card-icon {
   width: 120px !important;
 
-
   position: relative;
   top: 50%;
   left: 65%;
   transform: translate(-50%, -50%);
 }
 
-
-.stat-items
-{
+.stat-items {
   color: white;
 }
 
@@ -56,85 +70,71 @@
 }
 .stat-item-count {
   text-align: right;
-  color:  var(--secondary-color);
+  color: var(--secondary-color);
   font-weight: 500;
   font-size: 1.1em;
-
 }
 
-
-.Heading
-{
+.Heading {
   display: flex;
   flex-direction: row;
 }
 
-.Heading h1
-{
+.Heading h1 {
   padding-right: 10px;
 }
 
-.date-range
-{
+.date-range {
   width: 220px;
   height: 35px;
   color: white;
   display: flex;
-  background-color:  var(--secondary-background-color);
+  background-color: var(--secondary-background-color);
   border-radius: 8px;
   font-size: 1.2em;
   align-self: flex-end;
   justify-content: space-evenly;
-
 }
 
-
-.date-range .days input
-{
+.date-range .days input {
   height: 35px;
   outline: none;
   border: none;
-  background-color:transparent;
-  color:white;
+  background-color: transparent;
+  color: white;
   font-size: 1em;
   width: 40px;
 }
-.date-range .days
-{
+.date-range .days {
   background-color: rgb(255, 255, 255, 0.1);
- padding-inline: 10px;
+  padding-inline: 10px;
 }
 
-
-input[type=number]::-webkit-outer-spin-button,
-input[type=number]::-webkit-inner-spin-button {
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
- 
-input[type=number] {
+
+input[type="number"] {
   -moz-appearance: textfield;
 }
 
-
 .date-range .header,
-.date-range .trailer
-{
+.date-range .trailer {
   padding-inline: 10px;
   align-self: center;
 }
 
-.stat-items div a{
+.stat-items div a {
   text-decoration: none !important;
   color: white !important;
 }
 
-.stat-items div a:hover{
-  color:  var(--secondary-color) !important;
+.stat-items div a:hover {
+  color: var(--secondary-color) !important;
 }
 
-
-.item-name :hover{
-  color:  var(--secondary-color) !important;
+.item-name :hover {
+  color: var(--secondary-color) !important;
 }
-