Fixed glossary UI to be cleaner

app.py

@@ -159,11 +159,11 @@ app.layout = html.Div([
 # ============================================================================
 
 @app.callback(
-    [Output("glossary-modal-overlay", "style"),
-     Output("glossary-modal-content", "style")],
+    [Output("glossary-overlay-bg", "className"),
+     Output("glossary-drawer-content", "className")],
     [Input("open-glossary-btn", "n_clicks"),
      Input("close-glossary-btn", "n_clicks"),
-     Input("glossary-modal-overlay", "n_clicks")],
+     Input("glossary-overlay-bg", "n_clicks")],
     prevent_initial_call=True
 )
 def toggle_glossary(open_clicks, close_clicks, overlay_clicks):
@@ -172,9 +172,9 @@ def toggle_glossary(open_clicks, close_clicks, overlay_clicks):
         return no_update, no_update
     trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]
     if trigger_id == "open-glossary-btn":
-        return {'display': 'flex'}, {'display': 'block'}
+        return "glossary-overlay open", "glossary-drawer open"
     else:
-        return {'display': 'none'}, {'display': 'none'}
+        return "glossary-overlay", "glossary-drawer"
 
 
 # ============================================================================

assets/style.css

@@ -1513,4 +1513,57 @@ details[open].transformer-layers-container .transformer-layers-summary::before {
         font-size: 16px;
         /* Prevents zoom on iOS */
     }
+}
+
+/* Glossary Drawer Styles */
+.glossary-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.glossary-overlay.open {
+    opacity: 1;
+    visibility: visible;
+}
+
+.glossary-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 100%;
+    max-width: 500px;
+    background-color: white;
+    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
+    z-index: 1001;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    display: flex;
+    flex-direction: column;
+}
+
+.glossary-drawer.open {
+    transform: translateX(0);
+}
+
+.glossary-header {
+    padding: 20px 25px;
+    border-bottom: 1px solid #e2e8f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.glossary-content-area {
+    padding: 25px;
+    overflow-y: auto;
+    flex: 1;
 }

components/glossary.py

@@ -9,13 +9,14 @@ def create_glossary_modal():
     Create the hidden glossary modal that appears when the Help button is clicked.
     """
     return html.Div([
+        html.Div(id='glossary-overlay-bg', className='glossary-overlay'),
+        
         html.Div([
             html.Div([
-                html.H2("Transformer Concept Glossary", style={'marginTop': '0', 'color': '#2d3748'}),
+                html.H2("Transformer Concept Glossary"),
                 html.Button('×', id='close-glossary-btn', className='close-button', 
-                           style={'position': 'absolute', 'right': '15px', 'top': '15px', 
-                                  'background': 'none', 'border': 'none', 'fontSize': '24px', 'cursor': 'pointer'})
-            ], style={'position': 'relative', 'borderBottom': '1px solid #e2e8f0', 'paddingBottom': '15px', 'marginBottom': '15px'}),
+                           style={'background': 'none', 'border': 'none', 'fontSize': '28px', 'cursor': 'pointer', 'color': '#a0aec0'})
+            ], className='glossary-header'),
             
             html.Div([
                 _create_term_entry(
@@ -64,30 +65,10 @@ def create_glossary_modal():
                     "Digital Brain Surgery",
                     "A technique used to understand which parts of a model are responsible for certain behaviors. By artificially modifying or 'turning off' specific attention heads or activations, we can measure how much the model's output changes, revealing the importance of those components."
                 )
-            ], className="glossary-content", style={'maxHeight': '70vh', 'overflowY': 'auto', 'padding': '0 20px 10px 10px'}),
+            ], className="glossary-content-area"),
             
-        ], id='glossary-modal-content', className="modal-content", style={
-            'backgroundColor': 'white',
-            'padding': '30px',
-            'borderRadius': '8px',
-            'maxWidth': '900px', # Increased to fit videos
-            'width': '95%',
-            'boxShadow': '0 4px 6px rgba(0,0,0,0.1)',
-            'position': 'relative',
-            'display': 'block' 
-        })
-    ], id='glossary-modal-overlay', style={
-        'position': 'fixed',
-        'top': '0',
-        'left': '0',
-        'width': '100%',
-        'height': '100%',
-        'backgroundColor': 'rgba(0,0,0,0.5)',
-        'zIndex': '1000',
-        'display': 'none',
-        'alignItems': 'center',
-        'justifyContent': 'center'
-    })
+        ], id='glossary-drawer-content', className="glossary-drawer")
+    ], id='glossary-container')
 
 def _create_term_entry(term, analogy, definition, video_url=None):
     content = [