Spaces:
Sleeping
Sleeping
fix(ui): ensure desktop layout works in HF Spaces iframe
Browse files- Add iframe-specific fixes for HF Spaces embedding
- Force desktop sidebar widths in iframe environment
- Ensure minimum canvas width for playable desktop experience
- Add inline styles for immediate iframe fixes
- Prevent scrolling issues in embedded environment
- static/index.html +25 -0
- static/styles.css +59 -0
static/index.html
CHANGED
|
@@ -10,6 +10,31 @@
|
|
| 10 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
|
| 12 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 13 |
<link rel="stylesheet" href="/static/styles.css">
|
| 14 |
</head>
|
| 15 |
<body>
|
|
|
|
| 10 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
|
| 12 |
|
| 13 |
+
<!-- HF Spaces iframe fix -->
|
| 14 |
+
<style>
|
| 15 |
+
/* Force full viewport in iframe */
|
| 16 |
+
html, body {
|
| 17 |
+
height: 100vh !important;
|
| 18 |
+
width: 100vw !important;
|
| 19 |
+
overflow: hidden !important;
|
| 20 |
+
margin: 0 !important;
|
| 21 |
+
padding: 0 !important;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
/* Ensure desktop layout in iframe */
|
| 25 |
+
@media screen and (min-width: 1200px) {
|
| 26 |
+
#left-sidebar, #right-sidebar {
|
| 27 |
+
width: 320px !important;
|
| 28 |
+
min-width: 320px !important;
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
#canvas-container {
|
| 32 |
+
min-width: calc(100vw - 640px) !important;
|
| 33 |
+
flex: 1 !important;
|
| 34 |
+
}
|
| 35 |
+
}
|
| 36 |
+
</style>
|
| 37 |
+
|
| 38 |
<link rel="stylesheet" href="/static/styles.css">
|
| 39 |
</head>
|
| 40 |
<body>
|
static/styles.css
CHANGED
|
@@ -275,6 +275,65 @@
|
|
| 275 |
--hover-color: var(--bg-hover);
|
| 276 |
}
|
| 277 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 278 |
/* Modern Base Styles */
|
| 279 |
* {
|
| 280 |
margin: 0;
|
|
|
|
| 275 |
--hover-color: var(--bg-hover);
|
| 276 |
}
|
| 277 |
|
| 278 |
+
/* Fix for iframe embedding (HF Spaces) */
|
| 279 |
+
html, body {
|
| 280 |
+
height: 100vh;
|
| 281 |
+
width: 100vw;
|
| 282 |
+
overflow: hidden;
|
| 283 |
+
}
|
| 284 |
+
|
| 285 |
+
#app {
|
| 286 |
+
min-height: 100vh;
|
| 287 |
+
min-width: 100vw;
|
| 288 |
+
}
|
| 289 |
+
|
| 290 |
+
/* Ensure desktop layout works in iframe */
|
| 291 |
+
@media screen and (min-width: 1200px) {
|
| 292 |
+
#game-container {
|
| 293 |
+
min-height: calc(100vh - 80px); /* Subtract topbar height */
|
| 294 |
+
}
|
| 295 |
+
|
| 296 |
+
#canvas-container {
|
| 297 |
+
min-width: 600px; /* Ensure minimum playable area */
|
| 298 |
+
}
|
| 299 |
+
}
|
| 300 |
+
|
| 301 |
+
/* Prevent iframe scrolling issues */
|
| 302 |
+
body {
|
| 303 |
+
overflow: hidden;
|
| 304 |
+
position: fixed;
|
| 305 |
+
width: 100%;
|
| 306 |
+
height: 100%;
|
| 307 |
+
}
|
| 308 |
+
|
| 309 |
+
/* Additional iframe fixes for HF Spaces */
|
| 310 |
+
.space-iframe {
|
| 311 |
+
width: 100% !important;
|
| 312 |
+
height: 100vh !important;
|
| 313 |
+
border: none !important;
|
| 314 |
+
}
|
| 315 |
+
|
| 316 |
+
/* Force desktop layout in iframe environments */
|
| 317 |
+
.iframe-env #left-sidebar,
|
| 318 |
+
.iframe-env #right-sidebar {
|
| 319 |
+
width: 320px !important;
|
| 320 |
+
min-width: 320px !important;
|
| 321 |
+
}
|
| 322 |
+
|
| 323 |
+
.iframe-env #canvas-container {
|
| 324 |
+
min-width: calc(100vw - 640px) !important; /* 320px * 2 sidebars */
|
| 325 |
+
}
|
| 326 |
+
|
| 327 |
+
/* Detect iframe environment via JavaScript */
|
| 328 |
+
@media screen {
|
| 329 |
+
#app {
|
| 330 |
+
display: flex;
|
| 331 |
+
flex-direction: column;
|
| 332 |
+
height: 100vh;
|
| 333 |
+
width: 100vw;
|
| 334 |
+
}
|
| 335 |
+
}
|
| 336 |
+
|
| 337 |
/* Modern Base Styles */
|
| 338 |
* {
|
| 339 |
margin: 0;
|