tfrere commited on
Commit
9cd0edd
1 Parent(s): b2dcbca

update mobile view; fix iphone scroll bug

Browse files
frontend/public/index.html CHANGED
@@ -3,7 +3,10 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%PUBLIC_URL%/logo32.png" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
 
 
 
7
  <meta
8
  name="description"
9
  content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
@@ -56,6 +59,25 @@
56
  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
57
  rel="stylesheet"
58
  />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  </head>
60
  <body>
61
  <noscript>You need to enable JavaScript to run this app.</noscript>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%PUBLIC_URL%/logo32.png" />
6
+ <meta
7
+ name="viewport"
8
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
9
+ />
10
  <meta
11
  name="description"
12
  content="Interactive leaderboard tracking and comparing open-source Large Language Models across multiple benchmarks: IFEval, BBH, MATH, GPQA, MUSR, and MMLU-PRO."
 
59
  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
60
  rel="stylesheet"
61
  />
62
+ <style>
63
+ html,
64
+ body {
65
+ position: fixed;
66
+ width: 100%;
67
+ height: 100%;
68
+ overflow: hidden;
69
+ -webkit-overflow-scrolling: touch;
70
+ }
71
+ #root {
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ overflow-y: auto;
78
+ -webkit-overflow-scrolling: touch;
79
+ }
80
+ </style>
81
  </head>
82
  <body>
83
  <noscript>You need to enable JavaScript to run this app.</noscript>
frontend/src/App.js CHANGED
@@ -70,45 +70,55 @@ function App() {
70
  const theme = getTheme(mode);
71
 
72
  return (
73
- <QueryClientProvider client={queryClient}>
74
- <ThemeProvider theme={theme}>
75
- <CssBaseline />
76
- <Router>
77
- <LeaderboardProvider>
78
- <UrlHandler />
79
- <Box
80
- sx={{
81
- minHeight: "100vh",
82
- display: "flex",
83
- flexDirection: "column",
84
- bgcolor: "background.default",
85
- color: "text.primary",
86
- }}
87
- >
88
- <Navigation onToggleTheme={toggleTheme} mode={mode} />
89
  <Box
90
  sx={{
91
- flex: 1,
92
  display: "flex",
93
  flexDirection: "column",
94
- width: "100%",
95
- px: 4,
96
- pb: 4,
97
  }}
98
  >
99
- <Routes>
100
- <Route path="/" element={<LeaderboardPage />} />
101
- <Route path="/add" element={<AddModelPage />} />
102
- <Route path="/quote" element={<QuotePage />} />
103
- <Route path="/vote" element={<VoteModelPage />} />
104
- </Routes>
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </Box>
106
- <Footer />
107
- </Box>
108
- </LeaderboardProvider>
109
- </Router>
110
- </ThemeProvider>
111
- </QueryClientProvider>
112
  );
113
  }
114
 
 
70
  const theme = getTheme(mode);
71
 
72
  return (
73
+ <div
74
+ className="App"
75
+ style={{
76
+ height: "100%",
77
+ width: "100%",
78
+ WebkitOverflowScrolling: "touch",
79
+ overflow: "auto",
80
+ }}
81
+ >
82
+ <QueryClientProvider client={queryClient}>
83
+ <ThemeProvider theme={theme}>
84
+ <CssBaseline />
85
+ <Router>
86
+ <LeaderboardProvider>
87
+ <UrlHandler />
 
88
  <Box
89
  sx={{
90
+ minHeight: "100vh",
91
  display: "flex",
92
  flexDirection: "column",
93
+ bgcolor: "background.default",
94
+ color: "text.primary",
 
95
  }}
96
  >
97
+ <Navigation onToggleTheme={toggleTheme} mode={mode} />
98
+ <Box
99
+ sx={{
100
+ flex: 1,
101
+ display: "flex",
102
+ flexDirection: "column",
103
+ width: "100%",
104
+ px: 4,
105
+ pb: 4,
106
+ }}
107
+ >
108
+ <Routes>
109
+ <Route path="/" element={<LeaderboardPage />} />
110
+ <Route path="/add" element={<AddModelPage />} />
111
+ <Route path="/quote" element={<QuotePage />} />
112
+ <Route path="/vote" element={<VoteModelPage />} />
113
+ </Routes>
114
+ </Box>
115
+ <Footer />
116
  </Box>
117
+ </LeaderboardProvider>
118
+ </Router>
119
+ </ThemeProvider>
120
+ </QueryClientProvider>
121
+ </div>
 
122
  );
123
  }
124
 
frontend/src/components/shared/PageHeader.js CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { Box, Typography } from '@mui/material';
3
 
4
  const PageHeader = ({ title, subtitle }) => {
5
  return (
@@ -8,6 +8,7 @@ const PageHeader = ({ title, subtitle }) => {
8
  display: "flex",
9
  flexDirection: "column",
10
  alignItems: "center",
 
11
  mb: 6,
12
  mt: 6,
13
  gap: 2,
@@ -25,4 +26,4 @@ const PageHeader = ({ title, subtitle }) => {
25
  );
26
  };
27
 
28
- export default PageHeader;
 
1
+ import React from "react";
2
+ import { Box, Typography } from "@mui/material";
3
 
4
  const PageHeader = ({ title, subtitle }) => {
5
  return (
 
8
  display: "flex",
9
  flexDirection: "column",
10
  alignItems: "center",
11
+ textAlign: "center",
12
  mb: 6,
13
  mt: 6,
14
  gap: 2,
 
26
  );
27
  };
28
 
29
+ export default PageHeader;
frontend/src/config/theme.js CHANGED
@@ -371,6 +371,15 @@ const getDesignTokens = (mode) => ({
371
  },
372
  },
373
  },
 
 
 
 
 
 
 
 
 
374
  });
375
 
376
  const getTheme = (mode) => {
 
371
  },
372
  },
373
  },
374
+ breakpoints: {
375
+ values: {
376
+ xs: 0,
377
+ sm: 600,
378
+ md: 900,
379
+ lg: 1240,
380
+ xl: 1536,
381
+ },
382
+ },
383
  });
384
 
385
  const getTheme = (mode) => {
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/QuickFilters.js CHANGED
@@ -151,34 +151,37 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
151
  <Box sx={{ width: "100%" }}>
152
  <Box
153
  sx={{
154
- display: "flex",
155
- flexDirection: { xs: "column", md: "row" },
156
- alignItems: { xs: "flex-start", md: "center" },
157
- gap: 2,
 
 
 
 
 
 
 
 
158
  width: "100%",
159
- minHeight: { xs: "auto", md: "48px" },
160
- py: 1,
161
- px: 2,
 
 
 
162
  }}
163
  >
164
  <Box
165
  sx={{
166
  display: "flex",
167
  alignItems: "center",
168
- gap: 1,
169
- width: { xs: "100%", md: "auto" },
170
- mb: { xs: 1, md: 0 },
171
  }}
172
  >
173
- <Typography
174
- variant="subtitle2"
175
- sx={{
176
- fontSize: "0.8rem",
177
- fontWeight: 700,
178
- color: "text.secondary",
179
- whiteSpace: "nowrap",
180
- }}
181
- >
182
  Quick Filters
183
  </Typography>
184
  <InfoIconWithTooltip
@@ -190,8 +193,8 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
190
  <Box
191
  sx={{
192
  display: "flex",
193
- flexDirection: { xs: "column", md: "row" },
194
- alignItems: { xs: "stretch", md: "center" },
195
  gap: 2,
196
  flex: 1,
197
  width: { xs: "100%", md: "auto" },
@@ -200,9 +203,9 @@ const QuickFilters = ({ totalCount = 0, loading = false }) => {
200
  <Box
201
  sx={{
202
  display: "flex",
203
- flexDirection: { xs: "column", md: "row" },
204
  gap: 0.5,
205
- flexWrap: { xs: "nowrap", md: "nowrap" },
206
  borderRight: {
207
  xs: "none",
208
  md: (theme) => `1px solid ${alpha(theme.palette.divider, 0.2)}`,
 
151
  <Box sx={{ width: "100%" }}>
152
  <Box
153
  sx={{
154
+ backgroundColor: (theme) => ({
155
+ xs: alpha(theme.palette.primary.main, 0.02),
156
+ lg: "transparent",
157
+ }),
158
+ borderColor: (theme) => ({
159
+ xs: alpha(theme.palette.primary.main, 0.2),
160
+ lg: "transparent",
161
+ }),
162
+ border: "1px solid",
163
+ borderRadius: 1,
164
+ p: 3,
165
+ position: "relative",
166
  width: "100%",
167
+ display: "flex",
168
+ flexDirection: { xs: "column", lg: "row" },
169
+ transition: (theme) =>
170
+ theme.transitions.create(["border-color", "background-color"], {
171
+ duration: theme.transitions.duration.short,
172
+ }),
173
  }}
174
  >
175
  <Box
176
  sx={{
177
  display: "flex",
178
  alignItems: "center",
179
+ gap: 0.5,
180
+ mb: 1.5,
181
+ mr: 2,
182
  }}
183
  >
184
+ <Typography variant="body2" sx={{ fontWeight: 600 }}>
 
 
 
 
 
 
 
 
185
  Quick Filters
186
  </Typography>
187
  <InfoIconWithTooltip
 
193
  <Box
194
  sx={{
195
  display: "flex",
196
+ flexDirection: { xs: "column", lg: "row" },
197
+ alignItems: { xs: "stretch", lg: "center" },
198
  gap: 2,
199
  flex: 1,
200
  width: { xs: "100%", md: "auto" },
 
203
  <Box
204
  sx={{
205
  display: "flex",
206
+ flexDirection: { xs: "column", lg: "row" },
207
  gap: 0.5,
208
+ flexWrap: { xs: "nowrap", lg: "nowrap" },
209
  borderRight: {
210
  xs: "none",
211
  md: (theme) => `1px solid ${alpha(theme.palette.divider, 0.2)}`,
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js CHANGED
@@ -190,6 +190,7 @@ const SearchBar = ({
190
  flex: 1,
191
  fontSize: "1rem",
192
  color: "text.primary",
 
193
  "& .MuiInputBase-input": {
194
  padding: "2px 0",
195
  fontWeight: 600,
@@ -244,7 +245,7 @@ const SearchBar = ({
244
  variant="body2"
245
  sx={{
246
  fontWeight: 600,
247
- display: { xs: "none", sm: "block" },
248
  }}
249
  >
250
  Reset
@@ -282,7 +283,7 @@ const SearchBar = ({
282
  variant="body2"
283
  sx={{
284
  fontWeight: 600,
285
- display: { xs: "none", sm: "block" },
286
  }}
287
  >
288
  Advanced Filters
@@ -290,11 +291,13 @@ const SearchBar = ({
290
  </Box>
291
  <InfoIconWithTooltip
292
  tooltip={UI_TOOLTIPS.SEARCH_BAR}
293
- iconProps={{ sx: { fontSize: "1.2rem" } }}
 
 
294
  />
295
  </Box>
296
  </Paper>
297
- <Box sx={{ ml: 3.5 }}>
298
  {localValue ? (
299
  <SearchDescription searchValue={localValue} />
300
  ) : (
@@ -304,10 +307,13 @@ const SearchBar = ({
304
  sx={{
305
  color: "text.secondary",
306
  fontSize: "0.75rem",
307
- textAlign: "left",
308
  opacity: 1,
309
  transition: "opacity 0.2s ease",
310
- height: "18px",
 
 
 
311
  }}
312
  >
313
  Supports strict search and regex • Use semicolons for multiple
 
190
  flex: 1,
191
  fontSize: "1rem",
192
  color: "text.primary",
193
+ mr: 4,
194
  "& .MuiInputBase-input": {
195
  padding: "2px 0",
196
  fontWeight: 600,
 
245
  variant="body2"
246
  sx={{
247
  fontWeight: 600,
248
+ display: { xs: "none", md: "block" },
249
  }}
250
  >
251
  Reset
 
283
  variant="body2"
284
  sx={{
285
  fontWeight: 600,
286
+ display: { xs: "none", md: "block" },
287
  }}
288
  >
289
  Advanced Filters
 
291
  </Box>
292
  <InfoIconWithTooltip
293
  tooltip={UI_TOOLTIPS.SEARCH_BAR}
294
+ iconProps={{
295
+ sx: { fontSize: "1.2rem", display: { xs: "none", md: "block" } },
296
+ }}
297
  />
298
  </Box>
299
  </Paper>
300
+ <Box sx={{ ml: 3.5, mr: 3.5 }}>
301
  {localValue ? (
302
  <SearchDescription searchValue={localValue} />
303
  ) : (
 
307
  sx={{
308
  color: "text.secondary",
309
  fontSize: "0.75rem",
310
+ textAlign: { xs: "center", sm: "left" },
311
  opacity: 1,
312
  transition: "opacity 0.2s ease",
313
+ minHeight: "18px",
314
+ width: "100%",
315
+ whiteSpace: "normal",
316
+ lineHeight: 1.5,
317
  }}
318
  >
319
  Supports strict search and regex • Use semicolons for multiple
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/Table.js CHANGED
@@ -194,9 +194,10 @@ const TableControls = React.memo(
194
  <Box
195
  sx={{
196
  display: "flex",
197
- justifyContent: "flex-end",
198
  gap: 1,
199
  mb: 2,
 
200
  }}
201
  >
202
  <TableOptions
 
194
  <Box
195
  sx={{
196
  display: "flex",
197
+ justifyContent: { xs: "center", md: "flex-end" },
198
  gap: 1,
199
  mb: 2,
200
+ pt: { xs: 2, md: 0 },
201
  }}
202
  >
203
  <TableOptions