feat: responsible textarea height

pxeemo · Nov 18, 2024 · e8f46c7 · e8f46c7
1 parent 2d3144b
commit e8f46c7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -35,14 +35,14 @@
             </div>
         </div>
 
-        <div class="container mx-auto h-screen px-1 py-2 text-center">
+        <div class="container mx-auto h-[calc(100vh-3rem)] px-1 py-2 text-center">
             <textarea 
-                class="w-full p-2 outline-none bg-zinc-950 rounded-md focus:shadow-orange-400 focus:shadow-[0_0_2px_0_#fff] border-zinc-700 transition-all ease-in-out duration-300 focus:border-orange-400 border-2 resize-none"
+                class="w-full h-[calc(100%-2.5rem)] p-2 outline-none bg-zinc-950 rounded-md focus:shadow-orange-400 focus:shadow-[0_0_2px_0_#fff] border-zinc-700 transition-all ease-in-out duration-300 focus:border-orange-400 border-2 resize-none"
                 id="lyricInput" 
                 rows="20"
                 placeholder="Enter your lyric text here" 
                 required></textarea>
-            <button class="bg-orange-400 text-black rounded-md px-5 py-1 m-2" id="plainInputParser">Load</button>
+            <button class="h-8 bg-orange-400 text-black rounded-md px-5 py-1 m-2" id="plainInputParser">Load</button>
         </div>
 
         <div class="container mx-auto px-1 py-2 text-center hidden" id="syncer">

diff --git a/output.css b/output.css
@@ -634,6 +634,38 @@ video {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-\[calc\(100\%-20rem\)\] {
+  height: calc(100% - 20rem);
+}
+
+.h-\[calc\(100\%-40px\)\] {
+  height: calc(100% - 40px);
+}
+
+.h-\[calc\(100vh-2\.5rem\)\] {
+  height: calc(100vh - 2.5rem);
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-\[calc\(100\%-2\.5rem\)\] {
+  height: calc(100% - 2.5rem);
+}
+
+.h-\[calc\(100vh-3rem\)\] {
+  height: calc(100vh - 3rem);
+}
+
 .w-44 {
   width: 11rem;
 }