e80847b01f
* Fix project name overflow and add validation This commit addresses issue #971 by implementing both UI fixes and validation to prevent excessively long project names. Changes: 1. Add word-break and line-clamp to ProjectBanner.tsx to handle overflow gracefully with line-clamp-3 for names 2. Add frontend validation in ProjectModal.tsx limiting names to 6 words maximum 3. Add backend validation in project.js model with custom wordCount validator 4. Show user-friendly error messages when validation fails This ensures project names remain concise and UI-friendly while preventing the extreme overflow cases that were possible before. Fixes #971 * Add overflow-hidden to make line-clamp work properly The line-clamp utility requires explicit overflow-hidden to function correctly. Without it, the text continues to display in full rather than being truncated with ellipsis. * Fix line-clamp using inline CSS styles Tailwind's line-clamp utilities weren't working, so switched to using inline styles with the standard CSS approach: - display: -webkit-box - -webkit-line-clamp: 3 - -webkit-box-orient: vertical This ensures the text truncation works reliably across browsers. * Use Tailwind line-clamp utilities (already defined in CSS) The project already has line-clamp-1/2/3 utilities properly defined in tailwind.css with all the necessary webkit properties. Simplified the component to use these existing utilities instead of inline styles. * Add dedicated CSS classes with !important for line-clamp Created custom project-name-clamp and project-desc-clamp classes with !important flags to ensure they override any conflicting styles. This should finally fix the text truncation issue. * Use component-scoped styles for line-clamp Adding inline style tag in the component to ensure the line-clamp CSS is definitely loaded and applied. This bypasses any potential issues with external CSS compilation or loading order. * Change project name line-clamp from 3 to 2 lines Limiting project name display to 2 lines with ellipsis for better visual density and cleaner appearance. * Increase line-height for project name in banner Added line-height: 1.3 to project name for better readability and visual spacing between lines.
208 lines
4.6 KiB
CSS
208 lines
4.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
/* Scale down everything by 10% by setting base font-size to 90% */
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
border-left-color: #09f;
|
|
animation: spin 1s ease infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes border-pulse {
|
|
0%, 100% {
|
|
border-color: rgba(74, 222, 128, 0.3);
|
|
}
|
|
50% {
|
|
border-color: rgba(74, 222, 128, 0.8);
|
|
}
|
|
}
|
|
|
|
.dark .task-border-pulse {
|
|
animation: border-pulse-dark 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes border-pulse-dark {
|
|
0%, 100% {
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
}
|
|
50% {
|
|
border-color: rgba(34, 197, 94, 0.8);
|
|
}
|
|
}
|
|
|
|
.task-border-pulse {
|
|
animation: border-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* Rotating border animation for in-progress tasks */
|
|
@keyframes border-spin {
|
|
0% {
|
|
border-color: rgba(74, 222, 128, 0.8);
|
|
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.8);
|
|
}
|
|
25% {
|
|
border-color: rgba(74, 222, 128, 0.2);
|
|
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.2);
|
|
}
|
|
50% {
|
|
border-color: rgba(74, 222, 128, 0.8);
|
|
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.8);
|
|
}
|
|
75% {
|
|
border-color: rgba(74, 222, 128, 0.2);
|
|
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.2);
|
|
}
|
|
100% {
|
|
border-color: rgba(74, 222, 128, 0.8);
|
|
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.8);
|
|
}
|
|
}
|
|
|
|
.task-border-rotate {
|
|
border: 2px solid rgba(74, 222, 128, 0.8);
|
|
border-radius: 0.5rem;
|
|
animation: border-spin 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.dark .task-border-rotate {
|
|
border-color: rgba(34, 197, 94, 0.8);
|
|
}
|
|
|
|
@keyframes border-spin-dark {
|
|
0% {
|
|
border-color: rgba(34, 197, 94, 0.8);
|
|
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
|
|
}
|
|
25% {
|
|
border-color: rgba(34, 197, 94, 0.2);
|
|
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
|
|
}
|
|
50% {
|
|
border-color: rgba(34, 197, 94, 0.8);
|
|
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
|
|
}
|
|
75% {
|
|
border-color: rgba(34, 197, 94, 0.2);
|
|
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
|
|
}
|
|
100% {
|
|
border-color: rgba(34, 197, 94, 0.8);
|
|
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
|
|
}
|
|
}
|
|
|
|
.dark .task-border-rotate {
|
|
animation: border-spin-dark 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Select styling */
|
|
select {
|
|
appearance: none;
|
|
background-color: white;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.375rem;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
color: #111827;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 0.5rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
select:hover {
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
select:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* Dark mode select styling */
|
|
.dark select {
|
|
background-color: #111827;
|
|
border-color: #374151;
|
|
color: #f9fafb;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.dark select:hover {
|
|
border-color: #6b7280;
|
|
}
|
|
|
|
.dark select:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* Hide scrollbar for mobile tab navigation */
|
|
.scrollbar-hide {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari */
|
|
}
|
|
|
|
/* Project name and description line clamp */
|
|
.project-name-clamp {
|
|
display: -webkit-box !important;
|
|
-webkit-box-orient: vertical !important;
|
|
-webkit-line-clamp: 3 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.project-desc-clamp {
|
|
display: -webkit-box !important;
|
|
-webkit-box-orient: vertical !important;
|
|
-webkit-line-clamp: 2 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
@layer utilities {
|
|
.line-clamp-1,
|
|
.line-clamp-2,
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-1 {
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
}
|