Project

General

Profile

Feature #43700 » 0004-Replace-physical-CSS-properties-with-logical-ones-in.patch

responsive.css - Go MAEDA, 2026-01-21 11:50

View differences:

app/assets/stylesheets/responsive.css
51 51

  
52 52
  body,
53 53
  html {
54
    height: 100%;
54
    block-size: 100%;
55 55
    margin: 0;
56 56
    padding: 0;
57 57
  }
......
62 62
  }
63 63

  
64 64
  body {
65
    min-width: 0; /* reset the min-width of 900px */
65
    min-inline-size: 0; /* reset the min-width of 900px */
66 66
    -webkit-overflow-scrolling: touch;
67 67
  }
68 68

  
......
75 75
  }
76 76

  
77 77
  select {
78
    max-width: 100%;  /* prevent long names within select menues from breaking content */
78
    max-inline-size: 100%;  /* prevent long names within select menues from breaking content */
79 79
  }
80 80

  
81 81
  #wrapper {
82 82
    position: relative;
83 83
    overflow-x: hidden; /* hide horizontal overflow */
84
    max-width: 100%;
84
    max-inline-size: 100%;
85 85
    margin: 0;
86 86
  }
87 87

  
......
90 90
  \*----------------------------------------*/
91 91

  
92 92
  #header {
93
    width: 100%;
94
    height: 64px; /* the height of our header on mobile */
95
    min-height: 0;
93
    inline-size: 100%;
94
    block-size: 64px; /* the height of our header on mobile */
95
    min-block-size: 0;
96 96
    margin: 0;
97 97
    padding: 0;
98 98
    border: none;
......
122 122
  #header #quick-search {
123 123
    float: none;
124 124
    clear: none; /* there are themes which set clear property, this resets it */
125
    max-width: 100%; /* reset max-width */
125
    max-inline-size: 100%; /* reset max-width */
126 126
    margin: 0;
127 127
    background: inherit;
128 128
  }
......
130 130
  /* styles for combobox within quick-search (#project_quick_jump_box) */
131 131
  #project-jump.drdn {
132 132
    position: absolute;
133
    top: 0px;
134
    left: 0;
135

  
136
    width: 100%;
137
    max-width: 100%;
138
    height: 2em;
139
    height: 64px;
140
    padding: 5px;
141
    padding-right: 72px;
142
    padding-left: 20px;
133
    inset-block-start: 0px;
134
    inset-inline-start: 0;
135
    inline-size: 100%;
136
    max-inline-size: 100%;
137
    block-size: 2em;
138
    block-size: 64px;
139
    padding-block: 5px;
140
    padding-inline: 20px 72px;
143 141
  }
144 142
  #project-jump .drdn-trigger {
145 143
    font-size:1.5em;
146 144
    font-weight:bold;
147 145
    display:block;
148
    width:100%;
146
    inline-size:100%;
149 147
    color:var(--oc-white);
150
    padding-left:24px;
148
    padding-inline-start: 24px;
151 149
    background:transparent;
152
    height:50px;
150
    block-size:50px;
153 151
    line-height:40px;
154 152
    border:0;
155 153
  }
......
159 157
    font-size: 1.5em;
160 158

  
161 159
    position: absolute;
162
    left: 0;
163
    padding: 0 8px;
160
    inset-inline-start: 0;
161
    padding-block: 0;
162
    padding-inline: 8px;
164 163
    /* achieve dropdwon arrow by scaling a caret character */
165 164
    content: '^';
166 165
    -webkit-transform: scale(1,-.8);
167 166
            transform: scale(1,-.8);
168
    text-align: right;
167
    text-align: end;
169 168
    pointer-events: none;
170 169

  
171 170
    opacity: .6;
......
173 172
  #project-jump.expanded .drdn-trigger:before {
174 173
    -webkit-transform: scale(1,.8);
175 174
            transform: scale(1,.8);
176
    padding-top:8px;
175
    padding-block-start: 8px;
177 176
  }
178 177

  
179 178
  #project-jump .drdn-content {
180 179
    position:absolute;
181
    left:0px;
182
    top:64px;
183
    width:100%;
180
    inset-inline-start:0;
181
    inset-block-start:64px;
182
    inline-size:100%;
184 183
    font-size:0.9375rem;
185 184
    font-weight:normal;
186 185
  }
187 186
  #project-jump .drdn-content svg {
188
    width: 1.25rem;
189
    height: 1.25rem;
187
    inline-size: 1.25rem;
188
    block-size: 1.25rem;
190 189
  }
191 190
  #project-jump .drdn-content .autocomplete {
192
    height:40px;
191
    block-size:40px;
193 192
    font-size:1.25rem;
194
    padding-left: 28px !important;
193
    padding-inline-start: 28px !important;
195 194
  }
196 195
  #project-jump .drdn-content a {
197 196
    padding:8px;
......
206 205
  \*----------------------------------------*/
207 206

  
208 207
  #main {
209
    padding: 64px 0 0; /* padding-top equals header height */
208
    padding-block: 64px 0; /* padding-top equals header height */
209
    padding-inline: 0;
210 210
  }
211 211

  
212 212
  #main.nosidebar #content,
213 213
  div#content {
214
    width: 100%;
215
    min-height: 0; /* reset min-height of #content */
214
    inline-size: 100%;
215
    min-block-size: 0; /* reset min-height of #content */
216 216
    margin: 0;
217 217
  }
218 218

  
......
223 223
  }
224 224

  
225 225
  .splitcontentleft, .splitcontentright, .splitcontenttop {
226
    width: 100%;
226
    inline-size: 100%;
227 227
    flex: auto;
228
    margin-right: 0;
229
    margin-left: 0;
228
    margin-inline: 0;
230 229
  }
231 230

  
232 231
  /*----------------------------------------*\
......
241 240
    z-index: 10;
242 241

  
243 242
    display: block; /* remove display: none; of non-mobile version */
244
    float: right;
243
    float: inline-end;
245 244

  
246
    width: 60px;
247
    height: 64px;
248
    margin-top: 0;
245
    inline-size: 60px;
246
    block-size: 64px;
247
    margin-block-start: 0;
249 248

  
250 249
    text-align: center;
251 250

  
252
    border-left: 1px solid var(--oc-gray-3);
251
    border-inline-start: 1px solid var(--oc-gray-3);
253 252
  }
254 253

  
255 254
  .mobile-toggle-button:hover,
......
260 259
  .mobile-toggle-button:after {
261 260
    font-family: var(--fonts-main);
262 261
    display: block;
263
    margin-top: -3px;
262
    margin-block-start: -3px;
264 263
    content: '\2261';
265 264
  }
266 265

  
267 266
  .search-magnifier--flyout {
268 267
    position: absolute;
269 268
    z-index: 1;
270
    left: 12px;
269
    inset-inline-start: 12px;
271 270
  }
272 271

  
273 272
  /* Flyout Menu */
274 273

  
275 274
  .flyout-menu {
276 275
    position: absolute;
277
    right: -250px;
276
    inset-inline-end: -250px;
278 277

  
279 278
    display: block; /* remove display: none; of non-mobile version */
280 279
    overflow-x: hidden;
281 280

  
282
    width: 250px;
283
    height: 100%;
281
    inline-size: 250px;
282
    block-size: 100%;
284 283
    margin: 0; /* reset margin for themes that define it */
285 284
    padding: 0; /* reset padding for themes that define it */
286 285

  
......
297 296
    font-size: 0.6875rem;
298 297
    line-height: 19px;
299 298

  
300
    height: 20px;
299
    block-size: 20px;
301 300
    margin: 0;
302 301
    padding: 0;
303 302

  
......
305 304
    text-transform: uppercase;
306 305

  
307 306
    color: white;
308
    border-top: 1px solid #506a83;
309
    border-bottom: 1px solid #506a83;
307
    border-block: 1px solid #506a83;
310 308
    background-color: #628db6;
311 309
  }
312 310

  
......
326 324
  .flyout-menu__sidebar > form,
327 325
  .flyout-menu > div,
328 326
  .flyout-menu > form {
329
    padding-left: 8px;
327
    padding-inline-start: 8px;
330 328
  }
331 329

  
332 330
  .flyout-menu .flyout-menu__avatar {
333
    margin-top: -1px; /* move avatar up 1px */
334
    padding-left: 0;
331
    margin-block-start: -1px; /* move avatar up 1px */
332
    padding-inline-start: 0;
335 333
  }
336 334

  
337 335
  .flyout-menu__sidebar > form {
......
339 337
  }
340 338

  
341 339
  .flyout-menu__sidebar > form h3 {
342
    margin-left: -8px;
340
    margin-inline-start: -8px;
343 341
  }
344 342

  
345 343
  .flyout-menu__sidebar > form label {
346 344
    display: inline-block;
347
    margin: 8px 0;
345
    margin-block: 8px;
346
    margin-inline: 0;
348 347
  }
349 348

  
350 349
  .flyout-menu__sidebar > form br  br {
......
353 352

  
354 353
  /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */
355 354
  .flyout-menu__sidebar form > ul {
356
    margin-left: -8px;
357
    padding-left: 0;
355
    margin-inline-start: -8px;
356
    padding-inline-start: 0;
358 357
  }
359 358

  
360 359
  .flyout-menu__sidebar form > ul li {
361 360
    line-height: 39px;
362 361
    display: block;
363
    padding-left: 8px;
364
    border-top: 1px solid rgba(255,255,255,.1);
362
    padding-inline-start: 8px;
363
    border-block-start: 1px solid rgba(255,255,255,.1);
365 364
  }
366 365

  
367 366
  .flyout-menu__sidebar form > ul li:first-child {
368
    border-top: none;
367
    border-block-start: none;
369 368
  }
370 369

  
371 370
  .flyout-menu__sidebar form > ul li label {
......
375 374
  .flyout-menu__sidebar form > ul li label a {
376 375
    line-height: 1;
377 376
    display: inline;
378
    padding-left: 0;
377
    padding-inline-start: 0;
379 378
    border: none;
380 379
  }
381 380

  
......
403 402
  }
404 403

  
405 404
  #sidebar-wrapper {
406
    margin-left: -8px;
405
    margin-inline-start: -8px;
407 406
  }
408 407

  
409 408
  .flyout-menu #watchers ul li, .flyout-menu ul.queries li {
......
418 417
    -webkit-align-items: center;
419 418
    -webkit-box-align: center;
420 419
    align-items: center;
421
    border-top: 1px solid rgba(255,255,255,.1);
420
    border-block-start: 1px solid rgba(255,255,255,.1);
422 421
  }
423 422

  
424 423
  .flyout-menu #watchers ul li a, .flyout-menu ul.queries li a {
425
    border-top: none;
424
    border-block-start: none;
426 425
  }
427 426

  
428 427
  .flyout-menu ul.queries li a.icon-clear-query {
429 428
    flex-shrink: 0;
430
    padding-right: 8px;
429
    padding-inline-end: 8px;
431 430
  }
432 431

  
433 432
  .flyout-menu ul li a {
434 433
    line-height: 40px;
435 434
    display: block;
436 435
    overflow: hidden;
437
    height: 40px;
436
    block-size: 40px;
438 437
    white-space: nowrap;
439 438
    text-overflow: ellipsis;
440
    border-top: 1px solid rgba(255,255,255,.1);
439
    border-block-start: 1px solid rgba(255,255,255,.1);
441 440
  }
442 441

  
443 442
  .flyout-menu ul li:first-child a {
444 443
    line-height: 39px;
445
    height: 39px;
446
    border-top: none;
444
    block-size: 39px;
445
    border-block-start: none;
447 446
  }
448 447

  
449 448
  .flyout-menu a {
......
466 465
  /* Left flyout search container */
467 466
  .flyout-menu__search {
468 467
    line-height: 54px;
469
    height: 64px;
470
    padding-top: 3px;
471
    padding-right: 8px;
468
    block-size: 64px;
469
    padding-block-start: 3px;
470
    padding-inline-end: 8px;
472 471
  }
473 472

  
474 473
  .flyout-menu__search input[type='text'] {
475 474
    line-height: 2;
476 475

  
477
    width: 100%;
478
    height: 38px;
479
    padding-left: 27px;
476
    inline-size: 100%;
477
    block-size: 38px;
478
    padding-inline-start: 27px;
480 479

  
481 480
    vertical-align: middle;
482 481

  
......
490 489
    display: -webkit-box;
491 490
    display: -webkit-flex;
492 491
    display: flex;
493
    width: 100%;
494
    border-top: 1px solid rgba(255,255,255,.1);
492
    inline-size: 100%;
493
    border-block-start: 1px solid rgba(255,255,255,.1);
495 494
  }
496 495

  
497 496
  .flyout-menu__avatar img.gravatar {
498
    width: 40px;
499
    height: 40px;
497
    inline-size: 40px;
498
    block-size: 40px;
500 499
    padding: 0;
501 500
    vertical-align: top;
502 501
    border-width: 0;
......
504 503

  
505 504
  .flyout-menu__avatar a {
506 505
    line-height: 40px;
507
    height: auto;
508
    height: 40px;
506
    block-size: 40px;
509 507
    text-decoration: none;
510 508
    color: white;
511 509
  }
......
513 511
  /* avatar */
514 512
  .flyout-menu__avatar a:first-child {
515 513
    line-height: 0;
516
    width: 40px;
514
    inline-size: 40px;
517 515
    padding: 0;
518 516
  }
519 517

  
520 518
  .flyout-menu__avatar .user {
521
    padding-left: 15px;
522
    padding-right: 15px;
519
    padding-inline: 15px;
523 520
    text-overflow: ellipsis;
524 521
    overflow: hidden;
525 522
    white-space: nowrap;
......
530 527
  /* user link when no avatar is present */
531 528
  .flyout-menu__avatar--no-avatar a.user {
532 529
    line-height: 40px;
533
    padding-left: 8px;
530
    padding-inline-start: 8px;
534 531
  }
535 532

  
536 533
  .flyout-is-active body {
......
542 539
  }
543 540

  
544 541
  .flyout-is-active #wrapper, .flyout-is-active #header {
545
    right: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
542
    inset-inline-end: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
546 543
  }
547 544

  
548 545
  .flyout-is-active #wrapper {
549 546
    overflow: visible;
550
    height: 100%;
547
    block-size: 100%;
551 548
  }
552 549

  
553 550
  .flyout-is-active .mobile-toggle-button:after {
......
563 560
  }
564 561

  
565 562
  #admin-menu {
566
    padding-left: 0;
563
    padding-inline-start: 0;
567 564
  }
568 565

  
569 566
  #admin-menu li {
570
    padding-bottom: 0;
567
    padding-block-end: 0;
571 568
  }
572 569

  
573 570
  #admin-menu a,
......
586 583
  /* Contextual Buttons */
587 584

  
588 585
  #content>.contextual {
589
    width: 100%;
590
    margin-bottom: .5em;
591
    padding-left: 0; /* reset left padding in order to use whole space */
586
    inline-size: 100%;
587
    margin-block-end: .5em;
588
    padding-inline-start: 0; /* reset left padding in order to use whole space */
592 589
    white-space: normal;
593 590
  }
594 591

  
......
600 597
    display: inline-flex;
601 598

  
602 599
    margin: 5px 0;
603
    margin-right: 2px;
600
    margin-inline-end: 2px;
604 601
    padding: 9px 9px 9px 9px;
605 602

  
606 603
    border: 1px solid var(--oc-gray-4);
......
608 605
    border-radius: 3px;
609 606
  }
610 607
  #content>.contextual .drdn-content {
611
	right:initial;
612
    left:0px;
613
	top:40px;
608
    inset-inline-start: 0px;
609
    inset-inline-end: initial;
610
    inset-block-start: 40px;
614 611
  }
615 612
  #content>.contextual .drdn .drdn-content a {
616
    padding-top: 9px;
617
    padding-bottom: 9px;
613
    padding-block: 9px;
618 614
  }
619 615

  
620 616
  .flyout-menu .contextual {
......
623 619

  
624 620
  /* loading indicator */
625 621
  #ajax-indicator {
626
    width: 60%;
627
    left: 20%;
622
    inline-size: 60%;
623
    inset-inline-start: 20%;
628 624
  }
629 625

  
630 626
  /* jquery ui dialogs */
631 627
  .ui-dialog {
632
    max-width: 98%;
628
    max-inline-size: 98%;
633 629
    margin: 1%;
634 630
  }
635 631

  
636 632
  .ui-dialog .ui-dialog-content {
637
    padding-left: 0;
638
    padding-right: 0;
633
    padding-inline: 0;
639 634
  }
640 635

  
641
  #filters-table {width:100%; float:none;}
642
  .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
636
  #filters-table {inline-size: 100%; float: none;}
637
  .add-filter {inline-size: 100%; float: none; text-align: start; margin-block-start: 8px;}
643 638

  
644 639
  /*----------------------------------------*\
645 640
    F) PAGE SPECIFIC STYLES
......
650 645
    margin: 0;
651 646
  }
652 647

  
653
  div#activity dl, #search-results {margin-left: 0;}
648
  div#activity dl, #search-results {margin-inline-start: 0;}
654 649

  
655
  .version-overview table.progress {width:75%;}
656
  div#version-summary {float:none; width:100%; margin-left:0;}
657
  body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
650
  .version-overview table.progress {inline-size: 75%;}
651
  div#version-summary {float: none; inline-size: 100%; margin-inline-start: 0;}
652
  body.controller-versions.action-show div#roadmap .related-issues {inline-size :100%;}
658 653

  
659 654
  /* History and Changeset */
660 655
  div#issue-changesets {
661 656
    float: none;
662
    width: auto;
663
    margin-left: 0;
664
    padding-left: 0;
665
    margin-bottom: 2em;
657
    inline-size: auto;
658
    margin-inline-start: 0;
659
    padding-inline-start: 0;
660
    margin-block-end: 2em;
666 661
  }
667 662

  
668 663
  div#issue-changesets div.changeset {
669
    padding-top: 1em;
664
    padding-block-start: 1em;
670 665
  }
671 666

  
672 667
  /* Gantt charts */
......
677 672
   * [4] maintain width due to [3]
678 673
   */
679 674
  .gantt_subjects_column {
680
    width: 60% !important; /* [1] */
675
    inline-size: 60% !important; /* [1] */
681 676
  }
682 677

  
683 678
  .gantt_subjects_container {
684
    width: 100% !important;
679
    inline-size: 100% !important;
685 680
    overflow: hidden;
686 681
  }
687 682

  
688 683
  .gantt_subjects_column .gantt_hdr {
689
    width: 100% !important;
690
    right: 0 !important; /* [2] */
691
    border-right: solid 1px var(--oc-gray-4);
684
    inline-size: 100% !important;
685
    inset-inline-end: 0 !important; /* [2] */
686
    border-inline-end: solid 1px var(--oc-gray-4);
692 687
  }
693 688

  
694 689
  #gantt_area {
695
    left: -2px; /* [3] */
696
    margin-right: -2px; /* [4] */
690
    inset-inline-start: -2px; /* [3] */
691
    margin-inline-end: -2px; /* [4] */
697 692
  }
698 693

  
699 694
  /*----------------------------------------*\
......
701 696
  \*----------------------------------------*/
702 697

  
703 698
  input, select, textarea {
704
    max-width: 100%;
699
    max-inline-size: 100%;
705 700
  }
706 701

  
707 702
  /* tabular forms resets for mobile */
708 703
  .tabular p, .tabular.settings p {
709
    padding-left: 0;
704
    padding-inline-start: 0;
710 705
  }
711 706

  
712 707
  .tabular label, .tabular.settings label {
713 708
    display: block;
714
    width: 100%;
715
    margin-left: 0;
716
    text-align: left;
709
    inline-size: 100%;
710
    margin-inline-start: 0;
711
    text-align: start;
717 712
  }
718 713

  
719 714
  .tabular input, .tabular select, .tabular textarea {
720
    width: 100%;
721
    max-width: 100%;
715
    inline-size: 100%;
716
    max-inline-size: 100%;
722 717
  }
723 718

  
724 719
  .tabular input[type="checkbox"], .tabular input.date {
725
    width: auto;
726
    max-width: 95%;
720
    inline-size: auto;
721
    max-inline-size: 95%;
727 722
  }
728 723

  
729 724
  /* new issue form */
......
732 727
  }
733 728

  
734 729
  #all_attributes #issue_tracker_id {
735
    width: 90%;
730
    inline-size: 90%;
736 731
  }
737 732

  
738 733
  #issue_is_private_label {
......
740 735
  }
741 736

  
742 737
  span#watchers_inputs {
743
    width: 100%;
738
    inline-size: 100%;
744 739
  }
745 740

  
746 741
  /* issue edit form */
......
750 745

  
751 746
  /* issues page */
752 747
  body.controller-issues p.query-totals {
753
    margin-top: 0px;
754
    text-align: left;
748
    margin-block-start: 0;
749
    text-align: start;
755 750
  }
756 751

  
757 752
  /* subtasks and related issues list on issue show (without headers) */
......
764 759
  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.checkbox),
765 760
  #relations:not(.with-related-issues-table-headers) .issue > td:not(.checkbox) {
766 761
    display: block;
767
    float: left;
768
    text-align: left;
769
    padding-right: 5px;
762
    float: inline-start;
763
    text-align: start;
764
    padding-inline-end: 5px;
770 765
  }
771 766

  
772 767
  #issue_tree:not(.with-related-issues-table-headers) .issue > td.subject,
773 768
  #relations:not(.with-related-issues-table-headers) .issue > td.subject {
774
    width: 100%; /* let subject have one full width column */
769
    inline-size: 100%; /* let subject have one full width column */
775 770
  }
776 771

  
777 772
  #issue_tree:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject,
778 773
  #relations:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject {
779
    padding-right: 40px;
774
    padding-inline-end: 40px;
780 775
  }
781 776

  
782 777
  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.subject),
783 778
  #relations:not(.with-related-issues-table-headers) .issue > td:not(.subject) {
784
    width: 20%; /* three columns for all cells that are not subject */
779
    inline-size: 20%; /* three columns for all cells that are not subject */
785 780
  }
786 781

  
787 782
  #issue_tree:not(.with-related-issues-table-headers) table.issues, #issue_tree:not(.with-related-issues-table-headers) .issue,
......
792 787
  /* positioniong of unline button */
793 788
  #issue_tree:not(.with-related-issues-table-headers) .issue > td.buttons,
794 789
  #relations:not(.with-related-issues-table-headers) .issue > td.buttons {
795
    text-align: right;
790
    text-align: end;
796 791
    position: absolute;
797
    right: 0;
792
    inset-inline-end: 0;
798 793
    margin: 0;
799
    padding-right: 0;
794
    padding-inline-end: 0;
800 795
  }
801 796

  
802 797
  #issue_tree:not(.with-related-issues-table-headers) .issue .buttons a,
......
812 807

  
813 808
  #issue_tree.with-related-issues-table-headers .issue > td.subject,
814 809
  #relations.with-related-issues-table-headers .issue > td.subject {
815
    min-width: 15rem;
810
    min-inline-size: 15rem;
816 811
  }
817 812

  
818 813
  /* attachment upload form */
819 814
  .attachments_fields span {
820 815
    position: relative;
821 816
    clear: both;
822
    margin-bottom: 1em;
817
    margin-block-end: 1em;
823 818
    white-space: normal;
824 819
  }
825 820
  .attachments_fields span a.remove-upload {
826 821
    position: absolute;
827
    top: 0;
828
    right: 0;
822
    inset-block-start: 0;
823
    inset-inline-end: 0;
829 824
  }
830 825

  
831 826
  .attachments_fields input.description {
832
    margin-left: 0;
833
    width: 100%;
827
    margin-inline-start: 0;
828
    inline-size: 100%;
834 829
  }
835 830

  
836 831
  /* Calendar */
......
842 837
  }
843 838

  
844 839
  .cal .calbody {
845
    min-height: calc(1.2em * 3);
840
    min-block-size: calc(1.2em * 3);
846 841
  }
847 842

  
848 843
  .cal .calbody .abbr-day {
......
851 846

  
852 847
  .cal .week-number {
853 848
    border: 1px solid var(--oc-gray-4);
854
    text-align: left;
849
    text-align: start;
855 850
    font-weight: bold;
856 851
    background-color: var(--oc-blue-0);
857 852
  }
......
862 857

  
863 858
  .cal .calbody p.day-num {
864 859
    font-size: 1.1em;
865
    text-align: left;
860
    text-align: start;
866 861
  }
867 862

  
868 863
  /* Sticky issue header */
869 864
  /* When project-jump.drdn is visible in mobile layout, offset the sticky header by its height to prevent it from being hidden. */
870 865
  div#sticky-issue-header {
871
    top: 64px;
866
    inset-block-start: 64px;
872 867
  }
873 868

  
874 869
  /* Prevent content from being hidden behind #sticky-issue-header and project-jump when scrolling via anchor links. */
......
876 871
  .controller-issues.action-show #history div[id^="note-"],
877 872
  .controller-issues.action-show #history div[id^="change-"],
878 873
  .controller-issues.action-show #update {
879
    scroll-margin-top: 114px;
874
    scroll-margin-block-start: 114px;
880 875
  }
881 876
}
882 877

  
......
885 880
  .pagination ul.pages li {display:none;}
886 881
  .pagination ul.pages li.current,
887 882
  .pagination ul.pages li.previous,
888
  .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
883
  .pagination ul.pages li.next {display: inline-block; inline-size: 32%; overflow: hidden;}
889 884

  
890
  #login-form {width:100%; margin-top:2em;}
885
  #login-form {inline-size: 100%; margin-block-start: 2em;}
891 886

  
892
  #filters-table .filter .field, #list-definition > div .field { width: 100%; }
893
  #filters-table .values { width: auto; max-width: 100%; }
887
  #filters-table .filter .field, #list-definition > div .field { inline-size: 100%; }
888
  #filters-table .values { inline-size: auto; max-inline-size: 100%; }
894 889
}
(4-4/6)