@visns-studio/visns-components 5.8.18 → 5.8.19

package/package.json

@@ -86,7 +86,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.18",
+    "version": "5.8.19",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericFormBuilder.jsx

@@ -118,7 +118,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         let info = [];
 
         // Always show type
-        info.push(field.label);
         info.push(fieldTypeLabel);
 
         // Show size if not default

package/src/components/crm/generic/styles/GenericFormBuilder.module.scss

@@ -625,6 +625,20 @@ select:not(:placeholder-shown) + .fi__span {
         user-select: none;
     }
 
+    // Completely hide field info when modal is open
+    .fieldInfo {
+        opacity: 0 !important;
+        visibility: hidden !important;
+        z-index: 1 !important; // Much lower than modal backdrop
+    }
+
+    // Lower z-index of field controls when modal is open
+    .fieldControls {
+        z-index: 1 !important; // Much lower than modal backdrop
+        opacity: 0 !important;
+        visibility: hidden !important;
+    }
+
     // Disable hover effects on interactive fields when modal is open
     .interactiveField {
         &:hover {
@@ -1216,7 +1230,7 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: flex-start;
     opacity: 0;
     transition: opacity 0.2s ease;
-    z-index: 10000;
+    z-index: 1002; // Reduced from 10000 to be below modals but above content
     pointer-events: none;
 
     > * {
@@ -1230,34 +1244,38 @@ select:not(:placeholder-shown) + .fi__span {
     top: 8px; // Increased from 4px to provide more space for tooltip above
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(var(--primary-rgb), 0.85);
+    background: rgba(
+        var(--primary-rgb),
+        0.4
+    ); // Much more subtle - reduced from 0.85
     color: white;
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
+    padding: 3px 10px; // Slightly smaller padding
+    border-radius: 10px; // Slightly smaller border radius
+    font-size: 0.7rem; // Smaller font size
+    font-weight: 400; // Lighter font weight - reduced from 500
     white-space: nowrap;
-    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
-    z-index: 10001;
+    box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.15); // Much softer shadow
+    z-index: 1001; // Reduced from 10001 to be below modals but above content
     pointer-events: none;
-    opacity: 1; // Always visible
+    opacity: 0.7; // More subtle - reduced from 1
     transition: all 0.2s ease;
     max-width: calc(100% - 120px); // Leave space for drag handle and actions
     overflow: hidden;
     text-overflow: ellipsis;
 
-    // Enhanced styling on hover
+    // Enhanced styling on hover - more prominent when needed
     .interactiveField:hover & {
         opacity: 1;
-        background: var(--primary-color);
+        background: rgba(var(--primary-rgb), 0.85); // Full opacity on hover
         box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
         transform: translateX(-50%) scale(1.05);
+        font-weight: 500; // Bolder on hover
     }
 
     // Responsive behavior for smaller fields
     @media (max-width: 768px) {
-        font-size: 0.7rem;
-        padding: 3px 8px;
+        font-size: 0.65rem;
+        padding: 2px 8px;
         max-width: calc(100% - 100px);
     }
 }
@@ -1284,7 +1302,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 40px;
     min-height: 40px;
     position: relative;
-    z-index: 10001;
+    z-index: 1003; // Reduced from 10001 to be below modals but above content
 
     svg {
         display: block !important;
@@ -1334,7 +1352,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 36px;
     min-height: 36px;
     position: relative;
-    z-index: 10001;
+    z-index: 1003; // Reduced from 10001 to be below modals but above content
 
     svg {
         display: block !important;