pr360-questionnaire 2.1.6 → 2.1.10

package/css/components/_tables.scss

@@ -15,6 +15,7 @@ table {
     min-height: 52vh;
     border-radius: 10px;
     box-shadow: 5px 5px 20px 3px rgba(131, 131, 131, 0.198);
+    overflow: visible;
 }
 
 .table-container--questionaire {
@@ -40,6 +41,7 @@ table {
     grid-template-rows: auto 1fr auto;
     border-radius: 0 10px 10px 10px;
     padding: $space-md $space-md $space-lg $space-md;
+    overflow: visible;
 
     &_links {
         display: flex;
@@ -93,7 +95,6 @@ table {
         }
     }
 
-
     thead {
         tr {
             th {
@@ -111,485 +112,130 @@ table {
     -webkit-overflow-scrolling: touch;
 }
 
-table.prospects-table {
+.prospects-tables-container {
+    display: flex;
+    width: 100%;
+    position: relative;
+}
+
+.prospects-table {
     width: 100%;
-    min-width: 1200px;
-    /* Ensures horizontal scroll on smaller screens */
+    min-width: 0;
     border-collapse: collapse;
     border-spacing: 2px;
-
-    tbody {
-        tr {
-            border-bottom: 1px solid $gray-lighter;
-
-            td {
-                padding: $space-sm 16px;
-                /* Added horizontal padding */
-                white-space: nowrap;
-
-                &:nth-child(1) {
-                    min-width: 120px;
-                }
-
-                /* First Name */
-                &:nth-child(2) {
-                    min-width: 120px;
-                }
-
-                /* Last Name */
-                &:nth-child(3) {
-                    min-width: 200px;
-                }
-
-                /* Email */
-                &:nth-child(4) {
-                    min-width: 140px;
-                }
-
-                /* Phone */
-                &:nth-child(5) {
-                    min-width: 160px;
-                }
-
-                /* Insurance */
-                &:nth-child(6) {
-                    min-width: 100px;
-                }
-
-                /* Zip */
-                &:nth-child(7) {
-                    min-width: 140px;
-                }
-
-                /* Date */
-                &:nth-child(8) {
-                    min-width: 160px;
-                }
-
-                /* Outcome */
-                &:nth-child(9) {
-                    min-width: 200px;
-                }
-
-                /* Notes */
-                &:nth-child(10) {
-                    min-width: 120px;
-                }
-
-                /* Status */
-                &:nth-child(11) {
-                    min-width: 100px;
-                }
-
-                /* Actions */
-                textarea {
-                    resize: both;
-                    overflow: auto;
-                    min-width: 180px;
-                    min-height: 60px;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-    }
-
-    thead {
-        tr {
-            th {
-                text-align: left;
-                color: $gray;
-                font-weight: 400;
-                padding: $space-sm 16px;
-                /* Added horizontal padding */
-                white-space: nowrap;
-
-                /* Match the same widths as td */
-                &:nth-child(1) {
-                    min-width: 120px;
-                }
-
-                &:nth-child(2) {
-                    min-width: 120px;
-                }
-
-                &:nth-child(3) {
-                    min-width: 200px;
-                }
-
-                &:nth-child(4) {
-                    min-width: 140px;
-                }
-
-                &:nth-child(5) {
-                    min-width: 160px;
-                }
-
-                &:nth-child(6) {
-                    min-width: 100px;
-                }
-
-                &:nth-child(7) {
-                    min-width: 140px;
-                }
-
-                &:nth-child(8) {
-                    min-width: 160px;
-                }
-
-                &:nth-child(9) {
-                    min-width: 200px;
-                }
-
-                &:nth-child(10) {
-                    min-width: 120px;
-                }
-
-                &:nth-child(11) {
-                    min-width: 100px;
-                }
-            }
-        }
-    }
+    table-layout: fixed;
 }
 
-
-.locked {
-    filter: blur(3px);
+.prospects-table--main {
+    flex: 1;
+    margin-right: 0;
+    overflow-x: auto;
+    min-width: 1400px;
+    table-layout: fixed;
+}
+
+.prospects-table--main th:nth-child(1), .prospects-table--main td:nth-child(1) { width: 180px; min-width: 180px; }
+.prospects-table--main th:nth-child(2), .prospects-table--main td:nth-child(2) { width: 180px; min-width: 180px; }
+.prospects-table--main th:nth-child(3), .prospects-table--main td:nth-child(3) { width: 240px; min-width: 240px; }
+.prospects-table--main th:nth-child(4), .prospects-table--main td:nth-child(4) { width: 120px; min-width: 120px; }
+.prospects-table--main th:nth-child(5), .prospects-table--main td:nth-child(5) { width: 220px; min-width: 220px; }
+.prospects-table--main th:nth-child(6), .prospects-table--main td:nth-child(6) { width: 160px; min-width: 160px; }
+.prospects-table--main th:nth-child(7), .prospects-table--main td:nth-child(7) { width: 220px; min-width: 220px; }
+.prospects-table--main th:nth-child(8), .prospects-table--main td:nth-child(8) { width: 120px; min-width: 120px; }
+.prospects-table--main th:nth-child(9), .prospects-table--main td:nth-child(9) { width: 200px; min-width: 200px; }
+
+.prospects-table--main th:last-child,
+.prospects-table--main td:last-child {
+    padding-right: 140px;
+}
+
+.prospects-table--sticky {
+    position: sticky;
+    right: 0;
+    background: white;
+    box-shadow: -8px 0 16px -8px rgba(0, 0, 0, 0.10);
+    z-index: 10;
+    min-width: 220px;
+    width: 220px;
+    flex-shrink: 0;
+    table-layout: fixed;
+}
+
+.prospects-table--sticky th, .prospects-table--sticky td {
+    width: 90px;
+    padding: 12px 8px;
+    text-align: left;
+    box-sizing: border-box;
 }
 
-.tooltip-container {
-    position: relative;
-    display: inline-block;
-    z-index: 1050;
+.prospects-table--sticky th:first-child,
+.prospects-table--sticky td:first-child {
+    width: 140px;
+    min-width: 140px;
 }
 
-.tooltip-content {
-    visibility: visible;
-    width: auto;
-    background-color: $color-primary;
-    color: #fff;
-    max-height: 180px;
-    overflow-y: auto;
-    text-align: left;
-    border-radius: 6px;
-    padding: 12px;
-    position: absolute;
-    z-index: 1050;
-    bottom: 100%;
-    left: 0;
-    margin-bottom: 8px;
-    opacity: 1;
-    transition: opacity 0.3s;
+.prospects-table--sticky th:last-child,
+.prospects-table--sticky td:last-child {
+    width: 140px;
     white-space: nowrap;
-
-    &::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: rgba(255, 255, 255, 0.3);
-        border-radius: 3px;
-    }
-
-    // Arrow styling
-    &::before {
-        content: '';
-        position: absolute;
-        left: 20px;
-        bottom: -16px;
-        border-width: 8px;
-        border-style: solid;
-        border-color: $color-primary transparent transparent transparent;
-    }
 }
 
-.tooltip-content-no-history {
-    @extend .tooltip-content;
-    height: auto;
-    max-height: none;
-    overflow: hidden;
-    padding: 8px 12px;
+.prospects-table--sticky th {
+    font-weight: 600;
+    background: #f8f8f8;
 }
 
-.tooltip-list {
-    margin-top: 8px;
+.prospects-table--main th, .prospects-table--main td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    box-sizing: border-box;
 }
 
-.tooltip-item {
-    padding: 8px 0;
-    font-size: 12px;
-    line-height: 1.4;
+.prospects-table--main th, .prospects-table--main td,
+.prospects-table--sticky th, .prospects-table--sticky td {
+    padding: 16px 24px;
+    vertical-align: middle;
+    box-sizing: border-box;
 }
 
-.tooltip-hr {
-    hr {
-        margin: 4px 0;
-        border-color: rgba(255, 255, 255, 0.2);
-    }
+.prospects-table--main thead tr, .prospects-table--sticky thead tr {
+    height: 56px;
 }
 
-table {
-    font-size: 15px;
-    font-weight: 400;
+.prospects-table--main th, .prospects-table--sticky th {
+    font-weight: 600;
+    background: #f8f8f8;
+    box-sizing: border-box;
 }
 
-.table-grid {
-    display: grid;
-    grid-template-columns: 25% 1fr;
-    grid-gap: $space-md;
+.prospects-table--main tr, .prospects-table--sticky tr {
+    box-sizing: border-box;
 }
 
-.table-container {
-    background-color: #fff;
-    padding: $space-md $space-lg $space-lg $space-lg;
-    min-height: 52vh;
-    border-radius: 10px;
-    box-shadow: 5px 5px 20px 3px rgba(131, 131, 131, 0.198);
+.prospects-table--main tbody tr:hover {
+    background: #f0f4ff;
+    cursor: pointer;
+    transition: background 0.15s;
 }
 
-.table-container--questionaire {
-    thead {
-        tr {
-            th:first-child {
-                width: 135px;
-            }
-        }
-    }
-
-    tbody {
-        tr {
-            td:nth-child(2) {
-                max-width: 1000px;
-            }
-        }
-    }
+.prospects-table--sticky tbody tr:hover {
+    background: none !important;
+    cursor: default !important;
 }
 
-.table-container--prospects {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    border-radius: 0 10px 10px 10px;
-    padding: $space-md $space-md $space-lg $space-md;
-
-    &_links {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-
-        & span {
-            display: flex;
-            gap: 25px;
-        }
-
-        & div {
-            display: flex;
-            align-items: baseline;
-            gap: 10px;
-        }
-    }
-
-    h4 {
-        line-height: 26px;
-    }
-
-    .count {
-        background-color: $color-primary;
-        padding: 4px 8px;
-        color: #fff;
-        border-radius: 5px;
-    }
-
-    .background-primary {
-        background-color: $color-primary;
-        color: #fff;
-    }
-}
-
-table.org-users {
-    margin-bottom: 10vh;
+.prospects-table tr,
+.prospects-table td {
+    overflow: visible !important;
+    position: static !important;
 }
 
-table {
-    width: 100%;
-    border-collapse: collapse;
-
-    tbody {
-        tr {
-            border-bottom: 1px solid $gray-lighter;
-
-            td {
-                padding: $space-sm 0;
-            }
-        }
-    }
-
-
-    thead {
-        tr {
-            th {
-                text-align: left;
-                color: $gray;
-                font-weight: 400;
-            }
-        }
-    }
-}
-
-.prospects-table-wrapper {
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-table.prospects-table {
-    width: 100%;
-    min-width: 1200px;
-    /* Ensures horizontal scroll on smaller screens */
-    border-collapse: collapse;
-    border-spacing: 2px;
-
-    tbody {
-        tr {
-            border-bottom: 1px solid $gray-lighter;
-
-            td {
-                padding: $space-sm 16px;
-                /* Added horizontal padding */
-                white-space: nowrap;
-
-                &:nth-child(1) {
-                    min-width: 120px;
-                }
-
-                /* First Name */
-                &:nth-child(2) {
-                    min-width: 120px;
-                }
-
-                /* Last Name */
-                &:nth-child(3) {
-                    min-width: 200px;
-                }
-
-                /* Email */
-                &:nth-child(4) {
-                    min-width: 140px;
-                }
-
-                /* Phone */
-                &:nth-child(5) {
-                    min-width: 160px;
-                }
-
-                /* Insurance */
-                &:nth-child(6) {
-                    min-width: 100px;
-                }
-
-                /* Zip */
-                &:nth-child(7) {
-                    min-width: 140px;
-                }
-
-                /* Date */
-                &:nth-child(8) {
-                    min-width: 160px;
-                }
-
-                /* Outcome */
-                &:nth-child(9) {
-                    min-width: 200px;
-                }
-
-                /* Notes */
-                &:nth-child(10) {
-                    min-width: 120px;
-                }
-
-                /* Status */
-                &:nth-child(11) {
-                    min-width: 100px;
-                }
-
-                /* Actions */
-                textarea {
-                    resize: both;
-                    overflow: auto;
-                    min-width: 180px;
-                    min-height: 60px;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-    }
-
-    thead {
-        tr {
-            th {
-                text-align: left;
-                color: $gray;
-                font-weight: 400;
-                padding: $space-sm 16px;
-                /* Added horizontal padding */
-                white-space: nowrap;
-
-                /* Match the same widths as td */
-                &:nth-child(1) {
-                    min-width: 120px;
-                }
-
-                &:nth-child(2) {
-                    min-width: 120px;
-                }
-
-                &:nth-child(3) {
-                    min-width: 200px;
-                }
-
-                &:nth-child(4) {
-                    min-width: 140px;
-                }
-
-                &:nth-child(5) {
-                    min-width: 160px;
-                }
-
-                &:nth-child(6) {
-                    min-width: 100px;
-                }
-
-                &:nth-child(7) {
-                    min-width: 140px;
-                }
-
-                &:nth-child(8) {
-                    min-width: 160px;
-                }
-
-                &:nth-child(9) {
-                    min-width: 200px;
-                }
-
-                &:nth-child(10) {
-                    min-width: 120px;
-                }
-
-                &:nth-child(11) {
-                    min-width: 100px;
-                }
-            }
-        }
-    }
+.prospects-table .table-cell-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
 }
 
-
 .locked {
     filter: blur(3px);
 }
@@ -612,9 +258,10 @@ table.prospects-table {
     padding: 12px;
     position: absolute;
     z-index: 1050;
-    bottom: 100%;
-    left: 0;
-    margin-bottom: 8px;
+    top: 0;
+    left: 100%;
+    margin-left: 8px;
+    margin-top: 0;
     opacity: 1;
     transition: opacity 0.3s;
     white-space: nowrap;
@@ -633,15 +280,14 @@ table.prospects-table {
         border-radius: 3px;
     }
 
-    // Arrow styling
     &::before {
         content: '';
         position: absolute;
-        left: 20px;
-        bottom: -16px;
+        top: 16px;
+        left: -16px;
         border-width: 8px;
         border-style: solid;
-        border-color: $color-primary transparent transparent transparent;
+        border-color: transparent $color-primary transparent transparent;
     }
 }
 
@@ -669,6 +315,104 @@ table.prospects-table {
         border-color: rgba(255, 255, 255, 0.2);
     }
 }
+
 .field-div{
     margin-top: 10px;
+}
+
+// --- Schedule view specific styles ---
+.schedule-grid {
+  display: grid;
+  grid-template-columns: 18% 1fr; // notes narrower
+  grid-gap: 0; // no gap between notes and calendar
+  height: 75vh;
+  min-height: 0;
+}
+
+.schedule-notes {
+  padding: 0.5rem 1rem; // less padding inside notes
+  display: flex;
+  flex-direction: column;
+}
+
+.schedule-notes form,
+.schedule-notes textarea {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
+.schedule-notes textarea {
+  resize: vertical;
+  width: 100%;
+  height: 100%;
+  min-height: 60px;
+  box-sizing: border-box;
+}
+
+.schedule-grid pr360-calendar {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.schedule-grid pr360-calendar > * {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+}
+
+.prospects-table td,
+.prospects-table th {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.prospects-table td:nth-child(1),
+.prospects-table th:nth-child(1) {
+  min-width: 80px;
+}
+
+// Only truncate email column
+.prospects-table td:nth-child(3),
+.prospects-table th:nth-child(3) {
+  max-width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Status column: allow overflow for popup
+.prospects-table td:nth-child(6),
+.prospects-table th:nth-child(6) {
+  overflow: visible !important;
+  max-width: none !important;
+  position: relative !important;
+}
+
+.modal-blur-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  pointer-events: none;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+// Fade both tables and their contents when modal is open (robust selector)
+.prospects-table-wrapper.modal-open table,
+.prospects-table-wrapper.modal-open .prospects-table--main,
+.prospects-table-wrapper.modal-open .prospects-table--sticky,
+.prospects-table-wrapper.modal-open .prospects-table--main *,
+.prospects-table-wrapper.modal-open .prospects-table--sticky * {
+  opacity: 0.4 !important;
+  pointer-events: none !important;
+  filter: blur(1px) !important;
+  transition: opacity 0.2s, filter 0.2s;
 }