diff --git a/src/renderer/src/App.jsx b/src/renderer/src/App.jsx index aeb41a2..4bbade2 100644 --- a/src/renderer/src/App.jsx +++ b/src/renderer/src/App.jsx @@ -314,7 +314,7 @@ function App() { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 1.05 }} className="queue-view" - style={{ flex: 1, display: 'flex', flexDirection: 'column' }} + style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }} > {selectedSrt ? ( setSelectedSrt(null)} /> diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css index e714307..2232b57 100644 --- a/src/renderer/src/index.css +++ b/src/renderer/src/index.css @@ -90,7 +90,8 @@ body { flex-direction: column; padding: 20px; padding-top: 0; - min-height: 0; /* Important for flex children to scroll */ + min-height: 0; + /* Important for flex children to scroll */ } .header { @@ -217,9 +218,20 @@ body { } @keyframes pulse { - 0% { transform: scale(1); opacity: 0.3; } - 50% { transform: scale(1.1); opacity: 0.5; } - 100% { transform: scale(1); opacity: 0.3; } + 0% { + transform: scale(1); + opacity: 0.3; + } + + 50% { + transform: scale(1.1); + opacity: 0.5; + } + + 100% { + transform: scale(1); + opacity: 0.3; + } } .drop-zone h2 { @@ -347,22 +359,72 @@ body { } /* Custom Select Styles */ -.relative { position: relative; } -.absolute { position: absolute; } -.inset-y-0 { top: 0; bottom: 0; } -.left-0 { left: 0; } -.right-0 { right: 0; } -.z-50 { z-index: 50; } -.mt-1 { margin-top: 4px; } -.w-full { width: 100%; } -.flex { display: flex; } -.items-center { align-items: center; } -.justify-between { justify-content: space-between; } -.text-left { text-align: left; } -.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.block { display: block; } -.h-4 { height: 16px; } -.w-4 { width: 16px; } +.relative { + position: relative; +} + +.absolute { + position: absolute; +} + +.inset-y-0 { + top: 0; + bottom: 0; +} + +.left-0 { + left: 0; +} + +.right-0 { + right: 0; +} + +.z-50 { + z-index: 50; +} + +.mt-1 { + margin-top: 4px; +} + +.w-full { + width: 100%; +} + +.flex { + display: flex; +} + +.items-center { + align-items: center; +} + +.justify-between { + justify-content: space-between; +} + +.text-left { + text-align: left; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.block { + display: block; +} + +.h-4 { + height: 16px; +} + +.w-4 { + width: 16px; +} .bg-dark-glass { background: rgba(15, 15, 25, 0.95); @@ -374,45 +436,106 @@ body { overflow: hidden; } -.max-height-60 { max-height: 240px; } -.overflow-auto { overflow: auto; } -.rounded-md { border-radius: 8px; } -.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } -.py-1 { padding-top: 4px; padding-bottom: 4px; } -.py-2 { padding-top: 8px; padding-bottom: 8px; } -.pl-3 { padding-left: 12px; } -.pl-10 { padding-left: 40px; } -.pr-4 { padding-right: 16px; } +.max-height-60 { + max-height: 240px; +} -.select-none { user-select: none; } -.cursor-default { cursor: default; } -.font-normal { font-weight: 400; } -.font-medium { font-weight: 500; } +.overflow-auto { + overflow: auto; +} -.text-primary-cyan { color: var(--primary-cyan); } -.text-white { color: #ffffff; } +.rounded-md { + border-radius: 8px; +} + +.shadow-lg { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.py-1 { + padding-top: 4px; + padding-bottom: 4px; +} + +.py-2 { + padding-top: 8px; + padding-bottom: 8px; +} + +.pl-3 { + padding-left: 12px; +} + +.pl-10 { + padding-left: 40px; +} + +.pr-4 { + padding-right: 16px; +} + +.select-none { + user-select: none; +} + +.cursor-default { + cursor: default; +} + +.font-normal { + font-weight: 400; +} + +.font-medium { + font-weight: 500; +} + +.text-primary-cyan { + color: var(--primary-cyan); +} + +.text-white { + color: #ffffff; +} /* Scrollbar styling for dropdown */ .bg-dark-glass::-webkit-scrollbar { width: 6px; } + .bg-dark-glass::-webkit-scrollbar-track { background: transparent; } + .bg-dark-glass::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } + .bg-dark-glass::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* Animation for select dropdown */ -.transition { transition-property: opacity, transform; } -.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } -.duration-100 { transition-duration: 100ms; } -.opacity-0 { opacity: 0; } -.opacity-100 { opacity: 1; } +.transition { + transition-property: opacity, transform; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +.duration-100 { + transition-duration: 100ms; +} + +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} .drop-zone.drag-active { border-color: var(--primary-cyan); @@ -450,8 +573,13 @@ body { } @keyframes shimmer { - 0% { filter: hue-rotate(0deg); } - 100% { filter: hue-rotate(360deg); } + 0% { + filter: hue-rotate(0deg); + } + + 100% { + filter: hue-rotate(360deg); + } } /* Models View */ @@ -604,7 +732,8 @@ body { .srt-editor-container { display: flex; flex-direction: column; - height: 100%; + flex: 1; + min-height: 0; padding: 25px; position: relative; overflow: hidden; @@ -662,10 +791,10 @@ body { .segments-list { flex: 1; + min-height: 0; overflow-y: auto; padding-right: 15px; margin-bottom: 20px; - min-height: 0; } .segments-list::-webkit-scrollbar { @@ -874,4 +1003,4 @@ body { height: 100%; font-size: 20px; color: var(--primary-cyan); -} +} \ No newline at end of file