@teambit/workspace 1.0.1125 → 1.0.1126

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 (6) hide show
  1. package/dist/{preview-1787173269293.js → preview-1787239815569.js} +2 -2
  2. package/dist/ui/workspace/workspace-overview/workspace-blank-state.module.scss +15 -1
  3. package/dist/ui/workspace/workspace.module.scss +20 -0
  4. package/package.json +20 -19
  5. package/ui/workspace/workspace-overview/workspace-blank-state.module.scss +15 -1
  6. package/ui/workspace/workspace.module.scss +20 -0
package/dist/{preview-1787173269293.js → preview-1787239815569.js} RENAMED
@@ -1,5 +1,5 @@
1
- import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.1125/dist/workspace.composition.js';
2
- import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.1125/dist/workspace.docs.mdx';
1
+ import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.1126/dist/workspace.composition.js';
2
+ import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.workspace_workspace@1.0.1126/dist/workspace.docs.mdx';
3
3
 
4
4
  export const compositions = [compositions_0];
5
5
  export const overview = [overview_0];
package/dist/ui/workspace/workspace-overview/workspace-blank-state.module.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
2
+
1
3
  .container {
2
4
  width: 100%;
3
5
  height: 100%;
@@ -25,6 +27,10 @@
25
27
  margin: auto;
26
28
  padding: 48px 32px;
27
29
  text-align: center;
30
+
31
+ @media screen and (max-width: $br-sm) {
32
+ padding: 32px 20px;
33
+ }
28
34
  }
29
35
 
30
36
  .headline {
@@ -37,6 +43,10 @@
37
43
  letter-spacing: -0.02em;
38
44
  text-wrap: balance;
39
45
 
46
+ @media screen and (max-width: $br-sm) {
47
+ font-size: 34px;
48
+ }
49
+
40
50
  em {
41
51
  color: var(--bit-accent-color, #6c5ce7);
42
52
  font-style: italic;
@@ -117,7 +127,11 @@
117
127
 
118
128
  .diyGrid {
119
129
  display: grid;
120
- grid-template-columns: 1fr 1fr;
130
+ // auto-fit instead of a bare `1fr 1fr`: `1fr` has an `auto` minimum, so the nowrap command
131
+ // text set the column's min width and pushed the second card past the viewport edge on
132
+ // narrow screens. 280px is the width at which a full command + Copy button still fit, so
133
+ // the cards sit side by side when there's room and stack when there isn't.
134
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
121
135
  gap: 16px;
122
136
  }
123
137
 
package/dist/ui/workspace/workspace.module.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
2
+ @import '@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
2
3
 
3
4
  .emptyContainer {
4
5
  height: 100vh;
@@ -39,6 +40,15 @@
39
40
  display: flex;
40
41
  align-items: center;
41
42
  height: 100%;
43
+
44
+ // when the minimal top bar wraps into two rows on mobile, keep the breadcrumb row at the
45
+ // original bar height instead of stretching across both rows, and let a long component
46
+ // path clip rather than push the menu actions off-screen
47
+ @media screen and (max-width: $br-md) {
48
+ height: 46px;
49
+ min-width: 0;
50
+ overflow: hidden;
51
+ }
42
52
  }
43
53
 
44
54
  .breadcrumb {
@@ -143,6 +153,16 @@
143
153
  --bit-bg-heaviest: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
144
154
  --bit-border-color-lightest: var(--bit-bg-heaviest);
145
155
  border-bottom: 1px solid var(--border-medium-color, #e6e6e6);
156
+
157
+ // Mobile: a single 46px row can't fit breadcrumb + nav tabs + pinned widgets + version
158
+ // dropdown. The component menu switches to `display: contents` (see the component menu's
159
+ // topBarMinimal in menu.module.scss) so its pieces join this wrapping row: breadcrumb and
160
+ // actions stay on the first row, and the nav tabs wrap to a second full-width row.
161
+ @media screen and (max-width: $br-md) {
162
+ height: auto;
163
+ min-height: 46px;
164
+ flex-wrap: wrap;
165
+ }
146
166
  }
147
167
  }
148
168
 
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/workspace",
3
- "version": "1.0.1125",
3
+ "version": "1.0.1126",
4
4
  "homepage": "https://bit.cloud/teambit/workspace/workspace",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.workspace",
8
8
  "name": "workspace",
9
- "version": "1.0.1125"
9
+ "version": "1.0.1126"
10
10
  },
11
11
  "dependencies": {
12
12
  "lodash": "4.17.21",
@@ -90,6 +90,7 @@
90
90
  "@teambit/component-descriptor": "0.0.462",
91
91
  "@teambit/explorer.ui.components-overview": "0.0.5",
92
92
  "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
93
+ "@teambit/base-ui.layout.breakpoints": "1.0.0",
93
94
  "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.1",
94
95
  "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
95
96
  "@teambit/ui-foundation.ui.buttons.collapser": "0.0.235",
@@ -100,23 +101,23 @@
100
101
  "@teambit/workspace.hooks.use-url-change-broadcaster": "0.0.2",
101
102
  "@teambit/workspace.ui.preserve-workspace-mode": "0.0.3",
102
103
  "@teambit/evangelist.elements.icon": "1.0.5",
103
- "@teambit/component": "1.0.1125",
104
- "@teambit/dependency-resolver": "1.0.1125",
105
- "@teambit/envs": "1.0.1125",
106
- "@teambit/objects": "0.0.632",
107
- "@teambit/scope": "1.0.1125",
108
- "@teambit/graph": "1.0.1125",
109
- "@teambit/isolator": "1.0.1125",
110
- "@teambit/component-tree": "1.0.1125",
111
- "@teambit/watcher": "1.0.1125",
112
- "@teambit/aspect-loader": "1.0.1125",
113
- "@teambit/graphql": "1.0.1125",
114
- "@teambit/bundler": "1.0.1125",
115
- "@teambit/ui": "1.0.1125",
116
- "@teambit/command-bar": "1.0.1125",
117
- "@teambit/sidebar": "1.0.1125",
118
- "@teambit/pubsub": "1.0.1125",
119
- "@teambit/deprecation": "1.0.1125"
104
+ "@teambit/component": "1.0.1126",
105
+ "@teambit/dependency-resolver": "1.0.1126",
106
+ "@teambit/envs": "1.0.1126",
107
+ "@teambit/objects": "0.0.633",
108
+ "@teambit/scope": "1.0.1126",
109
+ "@teambit/graph": "1.0.1126",
110
+ "@teambit/isolator": "1.0.1126",
111
+ "@teambit/component-tree": "1.0.1126",
112
+ "@teambit/watcher": "1.0.1126",
113
+ "@teambit/aspect-loader": "1.0.1126",
114
+ "@teambit/graphql": "1.0.1126",
115
+ "@teambit/bundler": "1.0.1126",
116
+ "@teambit/ui": "1.0.1126",
117
+ "@teambit/command-bar": "1.0.1126",
118
+ "@teambit/sidebar": "1.0.1126",
119
+ "@teambit/pubsub": "1.0.1126",
120
+ "@teambit/deprecation": "1.0.1126"
120
121
  },
121
122
  "devDependencies": {
122
123
  "@types/lodash": "4.14.165",
package/ui/workspace/workspace-overview/workspace-blank-state.module.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
2
+
1
3
  .container {
2
4
  width: 100%;
3
5
  height: 100%;
@@ -25,6 +27,10 @@
25
27
  margin: auto;
26
28
  padding: 48px 32px;
27
29
  text-align: center;
30
+
31
+ @media screen and (max-width: $br-sm) {
32
+ padding: 32px 20px;
33
+ }
28
34
  }
29
35
 
30
36
  .headline {
@@ -37,6 +43,10 @@
37
43
  letter-spacing: -0.02em;
38
44
  text-wrap: balance;
39
45
 
46
+ @media screen and (max-width: $br-sm) {
47
+ font-size: 34px;
48
+ }
49
+
40
50
  em {
41
51
  color: var(--bit-accent-color, #6c5ce7);
42
52
  font-style: italic;
@@ -117,7 +127,11 @@
117
127
 
118
128
  .diyGrid {
119
129
  display: grid;
120
- grid-template-columns: 1fr 1fr;
130
+ // auto-fit instead of a bare `1fr 1fr`: `1fr` has an `auto` minimum, so the nowrap command
131
+ // text set the column's min width and pushed the second card past the viewport edge on
132
+ // narrow screens. 280px is the width at which a full command + Copy button still fit, so
133
+ // the cards sit side by side when there's room and stack when there isn't.
134
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
121
135
  gap: 16px;
122
136
  }
123
137
 
package/ui/workspace/workspace.module.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
2
+ @import '@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
2
3
 
3
4
  .emptyContainer {
4
5
  height: 100vh;
@@ -39,6 +40,15 @@
39
40
  display: flex;
40
41
  align-items: center;
41
42
  height: 100%;
43
+
44
+ // when the minimal top bar wraps into two rows on mobile, keep the breadcrumb row at the
45
+ // original bar height instead of stretching across both rows, and let a long component
46
+ // path clip rather than push the menu actions off-screen
47
+ @media screen and (max-width: $br-md) {
48
+ height: 46px;
49
+ min-width: 0;
50
+ overflow: hidden;
51
+ }
42
52
  }
43
53
 
44
54
  .breadcrumb {
@@ -143,6 +153,16 @@
143
153
  --bit-bg-heaviest: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
144
154
  --bit-border-color-lightest: var(--bit-bg-heaviest);
145
155
  border-bottom: 1px solid var(--border-medium-color, #e6e6e6);
156
+
157
+ // Mobile: a single 46px row can't fit breadcrumb + nav tabs + pinned widgets + version
158
+ // dropdown. The component menu switches to `display: contents` (see the component menu's
159
+ // topBarMinimal in menu.module.scss) so its pieces join this wrapping row: breadcrumb and
160
+ // actions stay on the first row, and the nav tabs wrap to a second full-width row.
161
+ @media screen and (max-width: $br-md) {
162
+ height: auto;
163
+ min-height: 46px;
164
+ flex-wrap: wrap;
165
+ }
146
166
  }
147
167
  }
148
168