anentrypoint-design 0.0.158 → 0.0.160

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/app-shell.css +15 -15
  2. package/dist/247420.css +15 -15
  3. package/dist/247420.js +9 -9
  4. package/package.json +1 -1
  5. package/src/components/shell.js +2 -2
package/app-shell.css CHANGED
@@ -186,14 +186,18 @@ pre .n { color: var(--green-2); }
186
186
 
187
187
  .app-topbar {
188
188
  position: sticky; top: 0; z-index: var(--z-header);
189
- display: grid; grid-template-columns: auto 1fr auto;
189
+ display: flex; flex-wrap: wrap;
190
190
  align-items: center; gap: var(--space-4);
191
191
  min-height: var(--app-topbar-h);
192
192
  padding: 10px var(--pad-x);
193
193
  background: color-mix(in oklab, var(--bg) 88%, transparent);
194
194
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
195
195
  }
196
- .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
196
+ .app-topbar > .brand { flex: 0 0 auto; }
197
+ .app-topbar > .app-search { flex: 1 1 auto; }
198
+ .app-topbar > nav { margin-left: auto; }
199
+ .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
200
+ .app-topbar nav a { flex: 0 0 auto; }
197
201
  .app-topbar nav a {
198
202
  color: var(--fg-2);
199
203
  padding: 12px 14px;
@@ -751,25 +755,21 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
751
755
  /* App Layout: single-column + drawer is handled once in the ≤900px block;
752
756
  no need to re-declare grid-template-columns here (was a redundant !important). */
753
757
 
754
- /* Topbar Navigation */
758
+ /* Topbar Navigation: stack the nav onto its own full-width row below the
759
+ brand and let it scroll horizontally. The brand stays on the first row;
760
+ nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
755
761
  .app-topbar {
756
- grid-template-columns: 1fr auto;
757
762
  gap: var(--space-2); padding: 12px var(--space-3);
758
763
  }
759
- .app-topbar nav a {
760
- padding: 12px 10px;
761
- min-height: 44px;
762
- }
763
- /* Keep primary nav reachable on small screens (apps without a sidebar have
764
- no other entry point). Compact it and let it scroll horizontally rather
765
- than hiding it entirely. */
766
- .app-topbar nav {
767
- display: flex; gap: 2px;
764
+ .app-topbar > nav {
765
+ flex: 1 1 100%; margin-left: 0; order: 3;
766
+ display: flex; gap: 2px; flex-wrap: nowrap;
768
767
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
769
- max-width: 60vw;
770
768
  }
771
769
  .app-topbar nav::-webkit-scrollbar { display: none; }
772
- .app-topbar nav a { padding: 10px 8px; white-space: nowrap; }
770
+ .app-topbar nav a {
771
+ flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
772
+ }
773
773
  .brand { font-size: var(--fs-tiny); font-weight: 600; }
774
774
 
775
775
  /* Search */
package/dist/247420.css CHANGED
@@ -518,14 +518,18 @@
518
518
 
519
519
  .ds-247420 .app-topbar {
520
520
  position: sticky; top: 0; z-index: var(--z-header);
521
- display: grid; grid-template-columns: auto 1fr auto;
521
+ display: flex; flex-wrap: wrap;
522
522
  align-items: center; gap: var(--space-4);
523
523
  min-height: var(--app-topbar-h);
524
524
  padding: 10px var(--pad-x);
525
525
  background: color-mix(in oklab, var(--bg) 88%, transparent);
526
526
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
527
527
  }
528
- .ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
528
+ .ds-247420 .app-topbar > .brand { flex: 0 0 auto; }
529
+ .ds-247420 .app-topbar > .app-search { flex: 1 1 auto; }
530
+ .ds-247420 .app-topbar > nav { margin-left: auto; }
531
+ .ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
532
+ .ds-247420 .app-topbar nav a { flex: 0 0 auto; }
529
533
  .ds-247420 .app-topbar nav a {
530
534
  color: var(--fg-2);
531
535
  padding: 12px 14px;
@@ -1083,25 +1087,21 @@
1083
1087
  /* App Layout: single-column + drawer is handled once in the ≤900px block;
1084
1088
  no need to re-declare grid-template-columns here (was a redundant !important). */
1085
1089
 
1086
- /* Topbar Navigation */
1090
+ /* Topbar Navigation: stack the nav onto its own full-width row below the
1091
+ brand and let it scroll horizontally. The brand stays on the first row;
1092
+ nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
1087
1093
  .ds-247420 .app-topbar {
1088
- grid-template-columns: 1fr auto;
1089
1094
  gap: var(--space-2); padding: 12px var(--space-3);
1090
1095
  }
1091
- .ds-247420 .app-topbar nav a {
1092
- padding: 12px 10px;
1093
- min-height: 44px;
1094
- }
1095
- /* Keep primary nav reachable on small screens (apps without a sidebar have
1096
- no other entry point). Compact it and let it scroll horizontally rather
1097
- than hiding it entirely. */
1098
- .ds-247420 .app-topbar nav {
1099
- display: flex; gap: 2px;
1096
+ .ds-247420 .app-topbar > nav {
1097
+ flex: 1 1 100%; margin-left: 0; order: 3;
1098
+ display: flex; gap: 2px; flex-wrap: nowrap;
1100
1099
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
1101
- max-width: 60vw;
1102
1100
  }
1103
1101
  .ds-247420 .app-topbar nav::-webkit-scrollbar { display: none; }
1104
- .ds-247420 .app-topbar nav a { padding: 10px 8px; white-space: nowrap; }
1102
+ .ds-247420 .app-topbar nav a {
1103
+ flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
1104
+ }
1105
1105
  .ds-247420 .brand { font-size: var(--fs-tiny); font-weight: 600; }
1106
1106
 
1107
1107
  /* Search */