Skip to content

Commit 1603e94

Browse files
zedhaquepamelafox
zedhaque
and
pamelafox
authored
CSS changes for responsive design (#1646)
* initial css changes for responsive design * run prettier * Add e2e tests for different sizes * updated layout with a hamburger menu item * cleanup and fixed spacing around the login button * Updating e2e tests for burger menu and title change * Running prettier --------- Co-authored-by: Pamela Fox <[email protected]> Co-authored-by: Pamela Fox <[email protected]>
1 parent f4fb45c commit 1603e94

File tree

20 files changed

+427
-220
lines changed

20 files changed

+427
-220
lines changed

‎app/frontend/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>GPT + Enterprise data | Sample</title>
7+
<title>Azure OpenAI + AI Search</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
.thoughtProcess {
22
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
33
word-wrap: break-word;
4-
padding-top: 12px;
5-
padding-bottom: 12px;
4+
padding-top: 0.75em;
5+
padding-bottom: 0.75em;
66
}
77

88
.tList {
9-
padding: 20px 20px 0 20px;
9+
padding: 1.25em 1.25em 0 1.25em;
1010
display: inline-block;
1111
background: #e9e9e9;
1212
}
1313

1414
.tListItem {
1515
list-style: none;
1616
margin: auto;
17-
margin-left: 20px;
18-
min-height: 50px;
19-
border-left: 1px dashed #123bb6;
20-
padding: 0 0 30px 30px;
17+
margin-left: 1.25em;
18+
min-height: 3.125em;
19+
border-left: 0.0625em solid #123bb6;
20+
padding: 0 0 1.875em 1.875em;
2121
position: relative;
2222
}
2323

@@ -40,25 +40,25 @@
4040
.tStep {
4141
color: #123bb6;
4242
position: relative;
43-
font-size: 14px;
44-
margin-bottom: 8px;
43+
font-size: 0.875em;
44+
margin-bottom: 0.5em;
4545
}
4646

4747
.tCodeBlock {
48-
max-height: 300px;
48+
max-height: 18.75em;
4949
}
5050

5151
.tProp {
5252
background-color: #d7d7d7;
5353
color: #333232;
54-
font-size: 12px;
55-
padding: 3px 10px;
56-
border-radius: 10px;
57-
margin-bottom: 8px;
54+
font-size: 0.75em;
55+
padding: 0.1875em 0.625em;
56+
border-radius: 0.625em;
57+
margin-bottom: 0.5em;
5858
}
5959

6060
.citationImg {
61-
height: 450px;
61+
height: 28.125rem;
6262
max-width: 100%;
6363
object-fit: contain;
6464
}

‎app/frontend/src/components/Answer/Answer.module.css‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
.answerContainer {
2-
padding: 20px;
2+
padding: 1.25em;
33
background: rgb(249, 249, 249);
4-
border-radius: 8px;
4+
border-radius: 0.5em;
55
box-shadow:
6-
0px 2px 4px rgba(0, 0, 0, 0.14),
7-
0px 0px 2px rgba(0, 0, 0, 0.12);
8-
outline: transparent solid 1px;
6+
0em 0.125em 0.25em rgba(0, 0, 0, 0.14),
7+
0em 0em 0.125em rgba(0, 0, 0, 0.12);
8+
outline: transparent solid 0.0625em;
99
}
1010

1111
.answerLogo {
12-
font-size: 28px;
12+
font-size: 1.75em;
1313
}
1414

1515
.answerText {
16-
font-size: 16px;
16+
font-size: 1rem;
1717
font-weight: 400;
18-
line-height: 22px;
19-
padding-top: 16px;
20-
padding-bottom: 16px;
18+
line-height: 1.375em;
19+
padding-top: 1em;
20+
padding-bottom: 1em;
2121
white-space: pre-line;
2222
}
2323

@@ -28,25 +28,25 @@
2828
.answerText td,
2929
.answerText th {
3030
border: 1px solid;
31-
padding: 5px;
31+
padding: 0.3125em;
3232
}
3333

3434
.selected {
35-
outline: 2px solid rgba(115, 118, 225, 1);
35+
outline: 0.125em solid rgba(115, 118, 225, 1);
3636
}
3737

3838
.citationLearnMore {
39-
margin-right: 5px;
39+
margin-right: 0.3125em;
4040
font-weight: 600;
41-
line-height: 24px;
41+
line-height: 1.5em;
4242
}
4343

4444
.citation {
4545
font-weight: 500;
46-
line-height: 24px;
46+
line-height: 1.5em;
4747
text-align: center;
48-
border-radius: 4px;
49-
padding: 0px 8px;
48+
border-radius: 0.25em;
49+
padding: 0em 0.5em;
5050
background: #d1dbfa;
5151
color: #123bb6;
5252
text-decoration: none;
@@ -58,21 +58,21 @@
5858
}
5959

6060
.followupQuestionsList {
61-
margin-top: 10px;
61+
margin-top: 0.625em;
6262
}
6363

6464
.followupQuestionLearnMore {
65-
margin-right: 5px;
65+
margin-right: 0.3125em;
6666
font-weight: 600;
67-
line-height: 24px;
67+
line-height: 1.5em;
6868
}
6969

7070
.followupQuestion {
7171
font-weight: 600;
72-
line-height: 24px;
72+
line-height: 1.5em;
7373
text-align: center;
74-
border-radius: 4px;
75-
padding: 0px 8px;
74+
border-radius: 0.25em;
75+
padding: 0em 0.5em;
7676
background: #e8ebfa;
7777
color: black;
7878
font-style: italic;
@@ -94,18 +94,18 @@ sup {
9494
display: inline-flex;
9595
align-items: center;
9696
justify-content: center;
97-
font-size: 10px;
97+
font-size: 0.625em;
9898
font-weight: 600;
9999
vertical-align: top;
100100
top: -1;
101-
margin: 0px 2px;
102-
min-width: 14px;
103-
height: 14px;
104-
border-radius: 3px;
101+
margin: 0em 0.125em;
102+
min-width: 0.875em;
103+
height: 0.875em;
104+
border-radius: 0.1875em;
105105
background: #d1dbfa;
106106
color: #123bb6;
107107
text-decoration-color: transparent;
108-
outline: transparent solid 1px;
108+
outline: transparent solid 0.0625em;
109109
cursor: pointer;
110110
}
111111

‎app/frontend/src/components/ClearChatButton/ClearChatButton.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.container {
22
display: flex;
33
align-items: center;
4-
gap: 6px;
4+
gap: 0.375em;
55
cursor: pointer;
6+
padding: 0.5rem;
67
}

‎app/frontend/src/components/Example/Example.module.css‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,68 @@
11
.examplesNavList {
22
list-style: none;
3-
padding-left: 0;
3+
padding-left: 1rem;
4+
padding-right: 1rem;
45
display: flex;
56
flex-wrap: wrap;
6-
gap: 10px;
7+
gap: 0.625rem;
78
flex: 1;
89
justify-content: center;
910
}
1011

1112
.example {
1213
word-break: break-word;
1314
background: #dbdbdb;
14-
border-radius: 8px;
15+
border-radius: 0.5rem;
1516
display: flex;
1617
flex-direction: column;
17-
padding: 20px;
18-
margin-bottom: 5px;
18+
margin-bottom: 0.3125rem;
1919
cursor: pointer;
2020
}
2121

2222
.example:hover {
2323
box-shadow:
24-
0px 8px 16px rgba(0, 0, 0, 0.14),
25-
0px 0px 2px rgba(0, 0, 0, 0.12);
26-
outline: 2px solid rgba(115, 118, 225, 1);
24+
0rem 0.5rem 1rem rgba(0, 0, 0, 0.14),
25+
0rem 0rem 0.125rem rgba(0, 0, 0, 0.12);
26+
outline: 0.125rem solid rgba(115, 118, 225, 1);
2727
}
2828

2929
.exampleText {
3030
margin: 0;
31-
font-size: 22px;
32-
width: 280px;
33-
min-height: 100px;
31+
font-size: 1.25rem;
32+
width: 25rem;
33+
padding: 0.5rem;
34+
min-height: 4.5rem;
3435
}
3536

36-
@media only screen and (max-height: 780px) {
37+
.examplesNavList li {
38+
display: none;
39+
}
40+
41+
.examplesNavList li:nth-of-type(1),
42+
.examplesNavList li:nth-of-type(2) {
43+
display: block; /* Default to showing two list items */
44+
}
45+
46+
@media only screen and (min-width: 992px) {
47+
.examplesNavList {
48+
flex-direction: row; /* Switch to row layout for wider screens */
49+
padding-left: 0;
50+
padding-right: 0;
51+
}
52+
53+
.example {
54+
margin-bottom: 0.3125rem;
55+
padding: 1.25rem;
56+
}
57+
58+
.examplesNavList li:nth-of-type(2),
59+
.examplesNavList li:nth-of-type(3) {
60+
display: block; /* Show an additional list item for medium heights */
61+
}
3762
.exampleText {
38-
font-size: 20px;
39-
height: 80px;
63+
font-size: 1.375rem;
64+
width: 17.5rem;
65+
padding: 0;
66+
min-height: 6.25rem;
4067
}
4168
}

‎app/frontend/src/components/GPT4VSettings/GPT4VSettings.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.container {
2-
margin-top: 10px;
2+
margin-top: 0.625em;
33
}

‎app/frontend/src/components/LoginButton/LoginButton.module.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.loginButton {
2-
border-radius: 5px;
3-
padding: 30px 30px;
2+
border-radius: 0.3125em;
43
font-weight: 100;
4+
margin: 0;
5+
padding: 0.5rem 1rem;
56
}

‎app/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
}
55

66
.markdownViewer {
7-
border-radius: 8px;
7+
border-radius: 0.5em;
88
box-shadow:
9-
#0000000d 0 0 0 1px,
10-
#0000001a 0 2px 3px;
9+
#0000000d 0 0 0 0.0625em,
10+
#0000001a 0 0.125em 0.1875em;
1111
background-color: white;
12-
margin: 20px 0;
12+
margin: 1.25em 0;
1313
}
1414

1515
.loading {
16-
padding: 100px;
16+
padding: 6.25em;
1717
height: 100vh;
1818
background-color: white;
1919
}
@@ -24,7 +24,7 @@
2424
}
2525

2626
.markdown {
27-
padding: 30px;
27+
padding: 1.875em;
2828
}
2929

3030
table {
@@ -33,8 +33,8 @@ table {
3333

3434
th,
3535
td {
36-
border: 1px solid #ddd;
37-
padding: 8px;
36+
border: 0.0625em solid #ddd;
37+
padding: 0.5em;
3838
}
3939

4040
tr:nth-child(even) {
@@ -44,6 +44,6 @@ tr:nth-child(even) {
4444
code {
4545
display: block;
4646
font-family: monospace;
47-
padding: 10px;
47+
padding: 0.625em;
4848
background-color: #f6f8fa;
4949
}

‎app/frontend/src/components/QuestionInput/QuestionInput.module.css‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
.questionInputContainer {
2-
border-radius: 8px;
2+
border-radius: 0.5rem;
33
box-shadow:
4-
0px 8px 16px rgba(0, 0, 0, 0.14),
5-
0px 0px 2px rgba(0, 0, 0, 0.12);
6-
height: 90px;
4+
0px 0.5rem 1rem rgba(0, 0, 0, 0.14),
5+
0px 0px 0.125rem rgba(0, 0, 0, 0.12);
76
width: 100%;
8-
padding: 15px;
7+
padding: 0.8rem;
98
background: white;
109
}
1110

1211
.questionInputTextArea {
1312
width: 100%;
14-
line-height: 40px;
13+
line-height: 2.5rem;
1514
}
1615

1716
.questionInputButtonsContainer {
1817
display: flex;
1918
flex-direction: column;
2019
justify-content: flex-end;
2120
}
21+
22+
@media (min-width: 992px) {
23+
.questionInputContainer {
24+
height: 5.625rem;
25+
}
26+
}

‎app/frontend/src/components/SettingsButton/SettingsButton.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.container {
22
display: flex;
33
align-items: center;
4-
gap: 6px;
4+
gap: 0.375em;
55
cursor: pointer;
6+
padding: 0.5rem;
67
}

0 commit comments

Comments
 (0)