Cardoza_Construction/Prism-Notes-Main
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix container overflow: constrain height and reduce bottom padding

Browse Source 
- Add max-h-[calc(100vh-120px)] and overflow-y-auto to note and conversation containers
- Reduce bottom padding from pb-32 (128px) to pb-16 (64px)
- Prevents form containers from expanding beyond viewport bounds
- Keeps header buttons (New Note, Conversations) visible at all times
- Allows scrolling within form when content exceeds viewport height
This commit is contained in:
aewing
2026-01-10 23:07:02 +00:00
parent 26092b314b
commit 649d9652b6
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -4
View File
@@ -122,7 +122,7 @@
</div> </div>
<!-- Note + Audio Container --> <!-- Note + Audio Container -->
<div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6"> <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6 max-h-[calc(100vh-120px)] overflow-y-auto">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<button id="backToListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button> <button id="backToListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
<h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Note</h2> <h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Note</h2>
@@ -172,7 +172,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="space-y-2 relative pb-32"> <div class="space-y-2 relative pb-16">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<button id="stopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled> <button id="stopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -307,7 +307,7 @@
</div> </div>
<!-- Conversation Form Container --> <!-- Conversation Form Container -->
<div id="conversationContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6"> <div id="conversationContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6 max-h-[calc(100vh-120px)] overflow-y-auto">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<button id="backToConversationsListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button> <button id="backToConversationsListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
<h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Conversation</h2> <h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Conversation</h2>
@@ -362,7 +362,7 @@
</div> </div>
</div> </div>
<div class="space-y-2 relative pb-32"> <div class="space-y-2 relative pb-16">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<button id="conversationStopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled> <button id="conversationStopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">