Hugging Face's logo

Spaces:
gladguy
/
SimpleProject
Sleeping

App Files Community
gladguy commited on
Commit
bb4e27e
·
1 Parent(s): 4225e3c

Add responsive CSS and Maps navigation logic

Browse files
Files changed (2) hide show
  1. app.py +47 -0
  2. test_iframe.html +143 -0
app.py CHANGED
@@ -773,6 +773,53 @@ with gr.Blocks(title="AnatomyBot - MBBS Anatomy Tutor") as demo:
773
  font-weight: 400 !important;
774
  font-size: 1.1rem !important;
775
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
776
  </style>
777
  """)
778
 
 
773
  font-weight: 400 !important;
774
  font-size: 1.1rem !important;
775
  }
776
+
777
+ /* ========================================
778
+ RESPONSIVE NAVIGATION BAR FIX
779
+ Ensures navigation stays horizontal in iframe/HF Spaces
780
+ ======================================== */
781
+
782
+ /* Force navigation bar to stay horizontal */
783
+ #nav_bar {
784
+ display: flex !important;
785
+ flex-direction: row !important;
786
+ flex-wrap: nowrap !important;
787
+ gap: 0.5rem !important;
788
+ width: 100% !important;
789
+ overflow-x: auto !important;
790
+ overflow-y: hidden !important;
791
+ }
792
+
793
+ /* Equal-width buttons that shrink gracefully */
794
+ #nav_bar button {
795
+ flex: 1 1 0 !important;
796
+ min-width: 0 !important;
797
+ white-space: nowrap !important;
798
+ overflow: hidden !important;
799
+ text-overflow: ellipsis !important;
800
+ font-size: 0.875rem !important;
801
+ padding: 0.5rem 0.75rem !important;
802
+ }
803
+
804
+ /* Responsive adjustments for narrower viewports */
805
+ @media (max-width: 900px) {
806
+ #nav_bar button {
807
+ font-size: 0.75rem !important;
808
+ padding: 0.4rem 0.5rem !important;
809
+ }
810
+ }
811
+
812
+ @media (max-width: 600px) {
813
+ #nav_bar button {
814
+ font-size: 0.7rem !important;
815
+ padding: 0.3rem 0.4rem !important;
816
+ }
817
+
818
+ /* Hide emojis on very small screens */
819
+ #nav_bar button::before {
820
+ content: none !important;
821
+ }
822
+ }
823
  </style>
824
  """)
825
 
test_iframe.html ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HF Spaces Iframe Simulator</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
+ background: #f5f5f5;
17
+ padding: 20px;
18
+ }
19
+
20
+ .container {
21
+ max-width: 1200px;
22
+ margin: 0 auto;
23
+ }
24
+
25
+ .header {
26
+ background: white;
27
+ padding: 15px 20px;
28
+ border-radius: 8px 8px 0 0;
29
+ border-bottom: 1px solid #e5e7eb;
30
+ }
31
+
32
+ .header h1 {
33
+ font-size: 18px;
34
+ color: #1f2937;
35
+ margin-bottom: 5px;
36
+ }
37
+
38
+ .header p {
39
+ font-size: 14px;
40
+ color: #6b7280;
41
+ }
42
+
43
+ .iframe-container {
44
+ background: white;
45
+ border-radius: 0 0 8px 8px;
46
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
47
+ overflow: hidden;
48
+ }
49
+
50
+ iframe {
51
+ width: 100%;
52
+ height: calc(100vh - 200px);
53
+ border: none;
54
+ display: block;
55
+ }
56
+
57
+ /* Simulate HF Spaces narrow layout */
58
+ @media (min-width: 900px) {
59
+ .iframe-container {
60
+ max-width: 850px;
61
+ margin: 0 auto;
62
+ }
63
+ }
64
+
65
+ .controls {
66
+ background: white;
67
+ padding: 10px 20px;
68
+ margin-bottom: 10px;
69
+ border-radius: 8px;
70
+ display: flex;
71
+ gap: 10px;
72
+ align-items: center;
73
+ }
74
+
75
+ .controls button {
76
+ padding: 8px 16px;
77
+ background: #4f46e5;
78
+ color: white;
79
+ border: none;
80
+ border-radius: 6px;
81
+ cursor: pointer;
82
+ font-size: 14px;
83
+ }
84
+
85
+ .controls button:hover {
86
+ background: #4338ca;
87
+ }
88
+
89
+ .width-indicator {
90
+ margin-left: auto;
91
+ font-size: 14px;
92
+ color: #6b7280;
93
+ font-family: monospace;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body>
98
+ <div class="container">
99
+ <div class="controls">
100
+ <button onclick="setWidth(850)">HF Spaces (850px)</button>
101
+ <button onclick="setWidth(1200)">Wide (1200px)</button>
102
+ <button onclick="setWidth(600)">Mobile (600px)</button>
103
+ <button onclick="location.reload()">Reload</button>
104
+ <div class="width-indicator" id="widthIndicator">Width: 850px</div>
105
+ </div>
106
+
107
+ <div class="header">
108
+ <h1>🧪 Gradio App - HF Spaces Iframe Simulator</h1>
109
+ <p>Testing responsive layout in iframe environment (similar to Hugging Face Spaces)</p>
110
+ </div>
111
+
112
+ <div class="iframe-container" id="iframeContainer">
113
+ <iframe src="http://localhost:7860" id="gradioIframe"></iframe>
114
+ </div>
115
+ </div>
116
+
117
+ <script>
118
+ function setWidth(width) {
119
+ const container = document.getElementById('iframeContainer');
120
+ const indicator = document.getElementById('widthIndicator');
121
+
122
+ if (width) {
123
+ container.style.maxWidth = width + 'px';
124
+ indicator.textContent = 'Width: ' + width + 'px';
125
+ } else {
126
+ container.style.maxWidth = '100%';
127
+ indicator.textContent = 'Width: 100%';
128
+ }
129
+ }
130
+
131
+ // Set initial width to simulate HF Spaces
132
+ setWidth(850);
133
+
134
+ // Update width indicator on window resize
135
+ window.addEventListener('resize', function() {
136
+ const container = document.getElementById('iframeContainer');
137
+ const actualWidth = container.offsetWidth;
138
+ const indicator = document.getElementById('widthIndicator');
139
+ indicator.textContent = 'Actual: ' + actualWidth + 'px';
140
+ });
141
+ </script>
142
+ </body>
143
+ </html>