Skip to content

Commit c7e6f87

Browse files
pd4d10pd4d10
committed
refactor: style tweaks
1 parent 52ab5a2 commit c7e6f87

3 files changed

Lines changed: 77 additions & 65 deletions

File tree

‎src/main/main.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ let mainWindow: BrowserWindow | null = null;
2525

2626
const createWindow = () => {
2727
mainWindow = new BrowserWindow({
28-
width: 800,
29-
height: 600,
28+
width: 1024,
29+
height: 768,
3030
titleBarStyle: "hidden",
3131
trafficLightPosition: { x: 14, y: 14 },
3232
icon:

‎src/renderer/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const App: React.FC = () => {
2121
className={darkMode ? "bp5-dark" : undefined}
2222
>
2323
<Header />
24-
<div style={{ overflowY: "auto" }}>
24+
<div style={{ flexGrow: 1, paddingLeft: 16, paddingRight: 16 }}>
2525
{Object.entries(sessionState).length ? (
2626
<Session />
2727
) : (

‎src/renderer/session.tsx‎

Lines changed: 74 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -36,77 +36,89 @@ export const Session: FC = () => {
3636

3737
return (
3838
<Tab
39+
style={{ overflowY: "auto" }}
3940
id={id}
4041
key={id}
4142
title={`${appInfo?.name} (${appInfo?.id})`}
4243
panel={
43-
<div style={{ display: "flex", marginTop: -20 }}>
44-
<div>
45-
<h3>Sessions (Click to open)</h3>
46-
<HTMLTable compact interactive>
47-
<thead>
48-
<tr>
49-
<th>Type</th>
50-
<th>Title</th>
51-
<th>Actions</th>
52-
</tr>
53-
</thead>
54-
<tbody>
55-
{Object.entries(session.page).map(([id, page]) => (
56-
<tr key={id}>
57-
<td>
58-
<Tag
59-
intent={
60-
page.type === "node"
61-
? "success"
62-
: page.type === "page"
63-
? "primary"
64-
: "none"
65-
}
66-
>
67-
{page.type}
68-
</Tag>
69-
</td>
70-
<td
71-
style={{
72-
maxWidth: 200,
73-
wordWrap: "break-word",
74-
}}
44+
<div
45+
style={{
46+
display: "flex",
47+
marginTop: -20,
48+
overflow: "auto",
49+
maxHeight: "calc(100vh - 100px)", // TODO:
50+
}}
51+
>
52+
<HTMLTable
53+
compact
54+
interactive
55+
style={{
56+
marginTop: 5,
57+
}}
58+
>
59+
<thead>
60+
<tr>
61+
<th>Type</th>
62+
<th>Title</th>
63+
<th>Actions</th>
64+
</tr>
65+
</thead>
66+
<tbody>
67+
{Object.entries(session.page).map(([id, page]) => (
68+
<tr key={id}>
69+
<td>
70+
<Tag
71+
intent={
72+
page.type === "node"
73+
? "success"
74+
: page.type === "page"
75+
? "primary"
76+
: "none"
77+
}
7578
>
76-
{page.title}
77-
</td>
78-
<td>
79-
<Button
80-
small
81-
rightIcon="share"
82-
onClick={() => {
83-
const url = page.devtoolsFrontendUrl
84-
.replace(
85-
/^\/devtools/,
86-
"devtools://devtools/bundled",
87-
)
88-
.replace(
89-
/^chrome-devtools:\/\//,
90-
"devtools://",
91-
);
92-
93-
require("electron").ipcRenderer.send(
94-
"open-window",
95-
url,
79+
{page.type}
80+
</Tag>
81+
</td>
82+
<td
83+
style={{
84+
maxWidth: 200,
85+
wordWrap: "break-word",
86+
}}
87+
>
88+
{page.title}
89+
</td>
90+
<td>
91+
<Button
92+
small
93+
rightIcon="share"
94+
onClick={() => {
95+
const url = page.devtoolsFrontendUrl
96+
.replace(
97+
/^\/devtools/,
98+
"devtools://devtools/bundled",
99+
)
100+
.replace(
101+
/^chrome-devtools:\/\//,
102+
"devtools://",
96103
);
97-
}}
98-
>
99-
Inspect
100-
</Button>
101-
</td>
102-
</tr>
103-
))}
104-
</tbody>
105-
</HTMLTable>
106-
</div>
104+
105+
require("electron").ipcRenderer.send(
106+
"open-window",
107+
url,
108+
);
109+
}}
110+
>
111+
Inspect
112+
</Button>
113+
</td>
114+
</tr>
115+
))}
116+
</tbody>
117+
</HTMLTable>
107118
<Divider />
108119
<Pre
109120
style={{
121+
marginTop: 5,
110122
flexGrow: 1,
111123
overflow: "auto",
112124
userSelect: "text",

0 commit comments

Comments
 (0)