Skip to content

Commit ba60abb

Browse files
ajhaiajhai
committed
Update styling for app layouts
1 parent 287adb3 commit ba60abb

File tree

9 files changed

+54
-42
lines changed

9 files changed

+54
-42
lines changed

‎llmstack/client/src/components/apps/AppPreview.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Box } from "@mui/material";
21
import { useEffect, useState } from "react";
32
import { useRecoilValue } from "recoil";
43
import { isMobileState } from "../../data/atoms";
@@ -23,9 +22,5 @@ export function AppPreview(props) {
2322
}
2423
}, [app, ws, wsUrlPrefix]);
2524

26-
return (
27-
<Box>
28-
<AppRenderer isMobile={isMobile} app={app} ws={ws} />
29-
</Box>
30-
);
25+
return <AppRenderer isMobile={isMobile} app={app} ws={ws} />;
3126
}

‎llmstack/client/src/components/apps/Published.jsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const PublishedAppFooter = () => {
127127

128128
export const PublishedApp = ({ ws, app, error, isLoggedIn, isMobile }) => {
129129
return (
130-
<Stack container spacing={2}>
130+
<Stack container spacing={2} height={"100vh"}>
131131
<PublishedAppHeader
132132
appName={app.name}
133133
appLogo={app.logo}
@@ -137,7 +137,7 @@ export const PublishedApp = ({ ws, app, error, isLoggedIn, isMobile }) => {
137137
<p></p>
138138
</Box>
139139
{error && <PublishedAppError error={error} isLoggedIn={isLoggedIn} />}
140-
<Box>
140+
<Box sx={{ height: "100%" }}>
141141
<AppRenderer app={app} isMobile={isMobile} ws={ws} />
142142
</Box>
143143
{(app.has_footer ||
@@ -156,9 +156,9 @@ export const PublishedAppWebEmbed = ({
156156
isMobile,
157157
}) => {
158158
return (
159-
<Stack container spacing={2}>
159+
<Stack container spacing={2} sx={{ height: "calc(100vh - 170px)" }}>
160160
{error && <PublishedAppError error={error} isLoggedIn={isLoggedIn} />}
161-
<Box>
161+
<Box sx={{ height: "100%" }}>
162162
<AppRenderer app={app} isMobile={isMobile} ws={ws} />
163163
</Box>
164164
{(app.has_footer ||
@@ -284,13 +284,15 @@ export const PublishedAppChatEmbed = ({
284284
{app?.name}
285285
</span>
286286
</div>
287-
<PublishedAppWebEmbed
288-
ws={ws}
289-
app={app}
290-
error={error}
291-
isLoggedIn={isLoggedIn}
292-
isMobile={isMobile}
293-
/>
287+
<Box sx={{ margin: 2 }}>
288+
<PublishedAppWebEmbed
289+
ws={ws}
290+
app={app}
291+
error={error}
292+
isLoggedIn={isLoggedIn}
293+
isMobile={isMobile}
294+
/>
295+
</Box>
294296
</div>
295297
)}
296298
</>

‎llmstack/client/src/components/apps/renderer/AppRenderer.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { isLoggedInState, appRunDataState } from "../../../data/atoms";
2424
import { useSetRecoilState, useRecoilValue } from "recoil";
2525
import LoginDialog from "../../LoginDialog";
2626

27-
export const defaultWorkflowLayout = `<pa-layout sx='{"maxWidth": "900px", "margin": "0 auto"}'>
27+
export const defaultWorkflowLayout = `<pa-layout sx='{"maxWidth": "1200px", "margin": "10px auto"}'>
2828
<pa-paper style="padding: 10px;">
2929
<pa-grid container="true" spacing="2" style="width: 100%">
3030
<pa-grid item="true" xs="12">
@@ -40,12 +40,12 @@ export const defaultWorkflowLayout = `<pa-layout sx='{"maxWidth": "900px", "marg
4040
</pa-paper>
4141
</pa-layout>`;
4242

43-
export const defaultChatLayout = `<pa-layout sx='{"maxWidth": "900px", "margin": "0 auto", "padding": "10px"}'>
44-
<pa-grid container="true" spacing="2" style="width: 100%">
45-
<pa-grid item="true" xs="12">
46-
<pa-chat-output sx='{"height": "calc(100vh - 300px)", "minHeight": "90%"}'></pa-chat-output>
43+
export const defaultChatLayout = `<pa-layout sx='{"maxWidth": "1200px", "margin": "0 auto", "padding": "5px 0", "height": "100%"}'>
44+
<pa-grid container="true" spacing="2" sx='{"height": "100%", "flexDirection": "column"}'>
45+
<pa-grid item="true" xs="12" sx='{"overflow": "auto !important", "flex": "1 1 0 !important", "padding": "0 !important"}'>
46+
<pa-chat-output></pa-chat-output>
4747
</pa-grid>
48-
<pa-grid item="true" xs="12">
48+
<pa-grid item="true" xs="12" sx='{"alignSelf": "flex-end", "flex": "0 !important", "width": "100%", "padding": "0 !important"}'>
4949
<pa-input-form clearonsubmit="true"></pa-input-form>
5050
</pa-grid>
5151
</pa-grid>

‎llmstack/client/src/components/apps/renderer/LayoutRenderer.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@
5656
flex-direction: column;
5757
position: relative;
5858
width: 100%;
59-
max-width: 900px;
59+
height: 100%;
60+
max-width: 1200px;
6061
margin: 0 auto;
6162
padding: 0;
6263
text-align: left;

‎llmstack/client/src/components/store/Search.jsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,12 @@ export default function Search({ appSlug }) {
142142
};
143143

144144
return (
145-
<Box ml={2} mr={2} mt={1}>
145+
<Box
146+
ml={2}
147+
mr={2}
148+
pt={1}
149+
sx={{ display: "flex", flexDirection: "column", maxHeight: "100vh" }}
150+
>
146151
<Paper
147152
component="form"
148153
sx={{ p: "2px 4px", display: "flex", alignItems: "center" }}
@@ -176,8 +181,8 @@ export default function Search({ appSlug }) {
176181
)}
177182

178183
{!searching && (
179-
<Stack mt={2} sx={{ textAlign: "left" }}>
180-
<Box>
184+
<>
185+
<Box sx={{ textAlign: "left", mt: 1 }}>
181186
{appCategories.map((category) => (
182187
<Chip
183188
key={category}
@@ -213,9 +218,11 @@ export default function Search({ appSlug }) {
213218
<p>No apps found</p>
214219
</Box>
215220
)}
216-
{apps.length > 0 &&
217-
apps.map((app) => <AppEntry app={app} key={app.slug} />)}
218-
</Stack>
221+
<Box sx={{ overflowY: "auto", flex: "1 1 auto" }}>
222+
{apps.length > 0 &&
223+
apps.map((app) => <AppEntry app={app} key={app.slug} />)}
224+
</Box>
225+
</>
219226
)}
220227
</Box>
221228
);

‎llmstack/client/src/components/store/StoreApp.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function StoreAppHeader({ name, icon, username, description, categories }) {
2727
};
2828

2929
return (
30-
<Card sx={{ marginLeft: 2, marginTop: 1, backgroundColor: "#edeff7" }}>
30+
<Card sx={{ backgroundColor: "#edeff7" }}>
3131
<Box
3232
sx={{
3333
display: "flex",
@@ -113,8 +113,8 @@ export default function StoreApp({ appSlug }) {
113113
}
114114

115115
return (
116-
<Grid container spacing={2} direction={"column"}>
117-
<Grid>
116+
<Grid container spacing={1} direction={"column"} sx={{ height: "100%" }}>
117+
<Grid sx={{ ml: 2, mt: 1 }}>
118118
<StoreAppHeader
119119
name={storeApp.name}
120120
icon={storeApp.icon512}
@@ -123,7 +123,7 @@ export default function StoreApp({ appSlug }) {
123123
categories={storeApp.categories}
124124
/>
125125
</Grid>
126-
<Grid>
126+
<Grid sx={{ flex: 1, ml: 2 }}>
127127
<AppRenderer app={storeApp} ws={ws} />
128128
</Grid>
129129
</Grid>

‎llmstack/client/src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const defaultTheme = createTheme({
146146
MuiFormControl: {
147147
styleOverrides: {
148148
root: {
149-
padding: "1px",
149+
padding: "1px 0",
150150

151151
"& .MuiFormHelperText-root": {
152152
overflow: "hidden",

‎llmstack/client/src/pages/AppConsole.jsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,15 @@ export default function AppConsolePage(props) {
385385
return isLoading ? (
386386
<CircularProgress />
387387
) : (
388-
<div id="app-edit-page" style={{ margin: 10 }}>
388+
<Box
389+
id="app-edit-page"
390+
style={{
391+
padding: 5,
392+
height: "100%",
393+
display: "flex",
394+
flexDirection: "column",
395+
}}
396+
>
389397
<AppBar
390398
position="sticky"
391399
sx={{
@@ -581,7 +589,6 @@ export default function AppConsolePage(props) {
581589
)}
582590
</AppBar>
583591
<Stack>
584-
&nbsp;
585592
{false &&
586593
missingKeys.length > 0 &&
587594
!profileFlags.IS_ORGANIZATION_MEMBER && (
@@ -619,7 +626,7 @@ export default function AppConsolePage(props) {
619626
</Stack>
620627
<Grid
621628
container
622-
sx={{ maxWidth: "1200px !important", margin: "auto" }}
629+
sx={{ maxWidth: "1200px !important", margin: "auto", flex: "1 1 auto" }}
623630
rowSpacing={1}
624631
columnSpacing={{ xs: 0, sm: 1 }}
625632
>
@@ -646,7 +653,7 @@ export default function AppConsolePage(props) {
646653
/>
647654
</Box>
648655
</Grid>
649-
<Grid item md={9} xs={12}>
656+
<Grid item md={9} xs={12} mt={3}>
650657
{Object.values(validationErrors).flatMap((entry) => entry.errors)
651658
.length > 0 && (
652659
<Box sx={{ marginBottom: "8px" }}>
@@ -663,7 +670,7 @@ export default function AppConsolePage(props) {
663670
</Alert>
664671
</Box>
665672
)}
666-
<Box sx={{ alignSelf: "flex-start" }}>
673+
<Box sx={{ alignSelf: "flex-start", height: "100%" }}>
667674
{selectedMenuItem === "editor" && (
668675
<AppEditor
669676
processors={processors}
@@ -769,6 +776,6 @@ export default function AppConsolePage(props) {
769776
handleCloseCb={() => setShowStoreListingModal(false)}
770777
/>
771778
)}
772-
</div>
779+
</Box>
773780
);
774781
}

‎llmstack/client/src/pages/Home.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function HomePage() {
77
const { appSlug = "super-agent" } = useParams();
88

99
return (
10-
<Grid container>
10+
<Grid container sx={{ height: "100%" }}>
1111
<Grid xs={12} md={7}>
1212
<StoreApp appSlug={appSlug} />
1313
</Grid>

0 commit comments

Comments
 (0)