Skip to content

Commit

Permalink
frontend: use fullscreen flag for layout height (#3225)
Browse files Browse the repository at this point in the history
Fullscreen workflows don't fully extend vertically. This PR leverages
the existing flag to extend it to the ContentGrid component and
conditionally set its height.

### Before
<img width="1070" alt="image"
src="https://github.com/user-attachments/assets/cee183a9-e85c-4051-833e-e2ca2255a112"
/>

### After
<img width="1071" alt="image"
src="https://github.com/user-attachments/assets/99d736af-7b3f-4384-99c4-4965cfd20d03"
/>
  • Loading branch information
jecr authored Feb 4, 2025
1 parent bcaa6c1 commit 4023ff3
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 9 deletions.
14 changes: 9 additions & 5 deletions frontend/packages/core/src/AppLayout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ const AppGrid = styled(MuiGrid)({
flex: 1,
});

const ContentGrid = styled(MuiGrid)({
flex: 1,
maxHeight: `calc(100vh - ${APP_BAR_HEIGHT})`,
});
const ContentGrid = styled(MuiGrid)<{ $isFullScreen: boolean }>(
{
flex: 1,
},
props => ({
maxHeight: props.$isFullScreen ? "100vh" : `calc(100vh - ${APP_BAR_HEIGHT})`,
})
);

const MainContent = styled.div({ overflowY: "auto", width: "100%" });

Expand All @@ -37,7 +41,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
header &&
React.cloneElement(header, { ...configuration, ...header.props })}
{!configuration?.useFullScreenLayout && !header && <Header {...configuration} />}
<ContentGrid container wrap="nowrap">
<ContentGrid container wrap="nowrap" $isFullScreen={configuration?.useFullScreenLayout}>
{isLoading ? (
<Loadable isLoading={isLoading} variant="overlay" />
) : (
Expand Down
8 changes: 4 additions & 4 deletions frontend/packages/core/src/Network/tests/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe("error interceptor", () => {

beforeAll(() => {
window = global.window;
global.window = Object.create(window);
global.window ??= Object.create(window);
Object.defineProperty(window, "location", {
value: {
href: "/example?foo=bar",
Expand All @@ -53,7 +53,7 @@ describe("error interceptor", () => {
});

afterAll(() => {
global.window = window;
global.window ??= window;
});

it("redirects to provided url", () => {
Expand Down Expand Up @@ -94,7 +94,7 @@ describe("error interceptor", () => {
let err: Promise<ClutchError>;
beforeAll(() => {
window = global.window;
global.window = Object.create(window);
global.window ??= Object.create(window);
Object.defineProperty(window, "location", {
value: {
href: "/example?foo=bar",
Expand Down Expand Up @@ -122,7 +122,7 @@ describe("error interceptor", () => {
});

afterAll(() => {
global.window = window;
global.window ??= window;
});

it("returns a ClutchError", () => {
Expand Down

0 comments on commit 4023ff3

Please sign in to comment.