From 1a99448a2e7bcc879891c8ced0f86c9bcea1877f Mon Sep 17 00:00:00 2001
From: Aiirondev <iron.ai.dev@gmail.com>
Date: Tue, 7 Jul 2026 21:43:44 +0200
Subject: [PATCH] slight css fix for the accesability of the script

---
 Web/templates/library_table.html | 52 ++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/Web/templates/library_table.html b/Web/templates/library_table.html
index 5cc160c..43a0039 100644
--- a/Web/templates/library_table.html
+++ b/Web/templates/library_table.html
@@ -4,6 +4,58 @@
 
 {% block content %}
 <style>
+    /* 1. The Dark Background Overlay */
+    .modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.6);
+        /* Ensure display is controlled by JS, but set up for centering */
+        align-items: center; 
+        justify-content: center;
+        z-index: 1000;
+    }
+    
+    /* 2. The White Modal Box */
+    .modal-content {
+        background-color: #fff;
+        padding: 20px;
+        width: 80%;
+        max-width: 600px;
+        border-radius: 8px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        
+        /* These three lines are the magic for a fixed header + scrolling body */
+        display: flex;
+        flex-direction: column;
+        max-height: 85vh; /* Prevents the box from being taller than the screen */
+    }
+    
+    /* 3. The Close Button */
+    .close {
+        align-self: flex-end; /* Pushes the 'x' to the right side */
+        color: #aaa;
+        font-size: 28px;
+        font-weight: bold;
+        cursor: pointer;
+        line-height: 1;
+        margin-bottom: 10px;
+    }
+    
+    .close:hover,
+    .close:focus {
+        color: #000;
+        text-decoration: none;
+    }
+    
+    /* 4. The Scrollable Content Area */
+    #detailContent {
+        overflow-y: auto; /* Adds the scrollbar ONLY if the text is too long */
+        padding-right: 10px; /* Optional: adds a little breathing room for the scrollbar */
+    }
+
     /* Library table-only view styles */
     .library-table-container {
         max-width: 1400px;