Onlyciu/resolution-elegance-table-magic

1 2/* Modern resolution column styling */3.resolution-cell {4    @apply text-sm text-gray-700 dark:text-gray-300;5    @apply px-3 py-2;6    @apply bg-gray-50 dark:bg-gray-700;7    @apply rounded-lg;8    @apply border border-gray-200 dark:border-gray-600;9    @apply transition-all duration-200;10    min-width: 200px;11    max-width: 600px;12    word-wrap: break-word;13    overflow-wrap: break-word;14    white-space: pre-wrap;15    line-height: 1.6;16    min-height: 40px;17    display: -webkit-box;18    -webkit-box-orient: vertical;19    -webkit-line-clamp: 6;20    overflow: hidden;21    text-overflow: ellipsis;22    transition: all 0.2s ease;23}24 25.resolution-cell:hover {26    @apply bg-primary-500 bg-opacity-5 dark:bg-opacity-10;27    @apply border-primary-500 border-opacity-30;28    @apply shadow-sm;29    -webkit-line-clamp: unset;30    max-height: none;31    overflow: auto;32}33 34@media (max-width: 768px) {35    .resolution-cell {36        max-width: 300px;37        -webkit-line-clamp: 4;38    }39}40/* Smooth transitions for dark mode */41html {42    transition: background-color 0.3s ease;43}44 45/* Table row hover effect */46tbody tr {47    transition: background-color 0.2s ease;48}49/* Status badge animations */50span {51    transition: all 0.2s ease;52}53 54/* Overflow indicator for resolution cells */55.resolution-cell.overflow-indicator {56    position: relative;57}58 59.resolution-cell.overflow-indicator:after {60    content: '...';61    position: absolute;62    bottom: 0;63    right: 0;64    background: linear-gradient(90deg, transparent, var(--tw-bg-opacity));65    padding-left: 5px;66    @apply bg-gray-50 dark:bg-gray-700;67}68 69.resolution-cell.expanded:after,70.resolution-cell:hover:after {71    display: none;72}73 74/* Cell expansion transition */75.resolution-cell {76    transition: all 0.3s ease, -webkit-line-clamp 0.3s ease;77}78