@@ -1447,6 +1447,82 @@ dd {
1447
1447
grid-column-start : 2 ;
1448
1448
}
1449
1449
1450
+ /* Mobile-friendly definition lists - only for manual content, not API reference */
1451
+ @media (max-width : 1130px ) {
1452
+ /* Apply to manual and tutorial pages only */
1453
+ .manual dl ,
1454
+ .tutorial dl {
1455
+ display : block !important ;
1456
+ grid-template-columns : unset !important ;
1457
+ }
1458
+
1459
+ .manual dt ,
1460
+ .tutorial dt {
1461
+ display : block !important ;
1462
+ grid-column-start : unset !important ;
1463
+ font-weight : bold ;
1464
+ margin : 1em 0 0.5em 0 ;
1465
+ }
1466
+
1467
+ .manual dd ,
1468
+ .tutorial dd {
1469
+ display : block !important ;
1470
+ grid-column-start : unset !important ;
1471
+ margin : 0 0 1.5em 1em ;
1472
+ }
1473
+ }
1474
+
1475
+ /* Responsive tables for API reference */
1476
+ @media (max-width : 1100px ) {
1477
+ .apicontent table {
1478
+ display : block ;
1479
+ width : 100% ;
1480
+ overflow-x : auto ;
1481
+ white-space : nowrap ;
1482
+ -webkit-overflow-scrolling : touch ; /* Smooth scrolling on iOS */
1483
+ }
1484
+ }
1485
+
1486
+ @media (max-width : 1100px ) {
1487
+ .apicontent th ,
1488
+ .apicontent td {
1489
+ white-space : nowrap ;
1490
+ min-width : 120px ; /* Minimum width to ensure readability */
1491
+ }
1492
+
1493
+ /* Ensure first column (usually function names) has more space */
1494
+ .apicontent th :first-child ,
1495
+ .apicontent td :first-child {
1496
+ min-width : 150px ;
1497
+ }
1498
+
1499
+ /* Limit last column width to reduce excessive scrolling */
1500
+ .apicontent th :last-child ,
1501
+ .apicontent td :last-child {
1502
+ max-width : 500px ;
1503
+ white-space : normal ; /* Allow text wrapping in description column */
1504
+ word-wrap : break-word ;
1505
+ }
1506
+ }
1507
+
1508
+ /* Extra small screens */
1509
+ @media (max-width : 480px ) {
1510
+ dd {
1511
+ margin-left : 0.5em ;
1512
+ }
1513
+
1514
+ .apicontent th ,
1515
+ .apicontent td {
1516
+ min-width : 100px ;
1517
+ font-size : 0.9em ; /* Slightly smaller text on very small screens */
1518
+ }
1519
+
1520
+ .apicontent th :first-child ,
1521
+ .apicontent td :first-child {
1522
+ min-width : 130px ;
1523
+ }
1524
+ }
1525
+
1450
1526
/* ******************************************************************************
1451
1527
* Example page
1452
1528
******************************************************************************/
0 commit comments