Spaces:
Sleeping
Sleeping
Aman Khare commited on
Commit ·
ed26318
1
Parent(s): 47ffbce
style: make frontend responsive for mobile layout
Browse files- frontend/index.html +28 -0
frontend/index.html
CHANGED
|
@@ -282,6 +282,34 @@
|
|
| 282 |
}
|
| 283 |
.empty-state .icon { font-size: 36px; opacity: 0.5; }
|
| 284 |
.empty-state p { font-size: 14px; max-width: 280px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 285 |
</style>
|
| 286 |
</head>
|
| 287 |
<body>
|
|
|
|
| 282 |
}
|
| 283 |
.empty-state .icon { font-size: 36px; opacity: 0.5; }
|
| 284 |
.empty-state p { font-size: 14px; max-width: 280px; }
|
| 285 |
+
|
| 286 |
+
/* Responsive Design */
|
| 287 |
+
@media (max-width: 768px) {
|
| 288 |
+
.layout {
|
| 289 |
+
display: flex;
|
| 290 |
+
flex-direction: column;
|
| 291 |
+
height: auto;
|
| 292 |
+
}
|
| 293 |
+
.panel-left {
|
| 294 |
+
border-right: none;
|
| 295 |
+
border-bottom: 2px solid var(--border);
|
| 296 |
+
min-height: 60vh;
|
| 297 |
+
}
|
| 298 |
+
.panel {
|
| 299 |
+
overflow: visible;
|
| 300 |
+
}
|
| 301 |
+
.scrollable {
|
| 302 |
+
overflow-y: visible;
|
| 303 |
+
}
|
| 304 |
+
#soapInputs > div {
|
| 305 |
+
grid-template-columns: 1fr !important;
|
| 306 |
+
}
|
| 307 |
+
.soap-grid {
|
| 308 |
+
grid-template-columns: 1fr;
|
| 309 |
+
}
|
| 310 |
+
.header h1 span { font-size: 18px; }
|
| 311 |
+
.header h1 { font-size: 15px; }
|
| 312 |
+
}
|
| 313 |
</style>
|
| 314 |
</head>
|
| 315 |
<body>
|