client-web: mobile layout improvements

franzos · Sep 5, 2023 · 32c30d5 · 32c30d5
1 parent 6666072
commit 32c30d5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/client-web/src/components/event.tsx b/client-web/src/components/event.tsx
@@ -269,9 +269,12 @@ export function Event({
  <ModalHeader>Event</ModalHeader>
  <ModalCloseButton />
  <ModalBody overflowY="auto">
- <pre>
- <code>{JSON.stringify(event, null, 2)}</code>
- </pre>
+ <Text>Relay: {eventRelayUrls[0]}</Text>
+ <Box m={4}>
+ <pre>
+ <code>{JSON.stringify(event, null, 2)}</code>
+ </pre>
+ </Box>
  </ModalBody>
  </ModalContent>
  </Modal>
@@ -330,9 +333,10 @@ export function Event({
  {showContent ? (
  images &&
  images.length > 0 && (
- <Box className="image-container" marginBottom={4}>
+ <Box marginBottom={4}>
  {images.map((i, index) => (
  <Image
+ width={"100%"}
  key={index}
  src={i}
  fallback={<Image src="/no-image.png" />}
@@ -369,7 +373,6 @@ export function Event({
  <ActionButtons />
 
  <Spacer />
- <Text>{eventRelayUrls[0]}</Text>
 
  <Button
  size={"sm"}

diff --git a/client-web/src/components/user-info.tsx b/client-web/src/components/user-info.tsx
@@ -1,12 +1,12 @@
 import {
- Flex,
  Avatar,
  Heading,
  Spacer,
  Button,
  Box,
  Image,
  Text,
+ HStack,
 } from "@chakra-ui/react";
 import { Link } from "react-router-dom";
 import { useNClient } from "../state/client";
@@ -33,7 +33,7 @@ export function UserInfo({
  <Image src={banner} alt="banner" />
  </Box>
  )}
- <Flex>
+ <HStack>
  <Box mr="3">
  <Link to={profileLink}>
  <Avatar size="sm" src={picture} />
@@ -63,7 +63,7 @@ export function UserInfo({
  {following ? "Unfollow" : "Follow"}
  </Button>
  )}
- </Flex>
+ </HStack>
  </>
  );
 }
diff --git a/client-web/src/routes/welcome.tsx b/client-web/src/routes/welcome.tsx
@@ -61,7 +61,7 @@ export function WelcomeRoute() {
  <Grid templateColumns={["1fr", "2fr 1fr"]} gap={20}>
  <Box>
  {connected ? (
- <Box maxHeight="80vh" overflowY="auto">
+ <Box overflowY="auto">
  <Events
  userComponent={User}
  view="welcome"

diff --git a/client-web/src/theme.ts b/client-web/src/theme.ts
@@ -7,6 +7,9 @@ const config: ThemeConfig = {
 
 const theme = extendTheme({
  config,
+ breakpoints: {
+ sm: "500px",
+ },
 });
 
 export default theme;