Skip to content

Commit 6dfb51d

Browse files
omursahinomursahin
committed
tab layout fixes
1 parent f58b097 commit 6dfb51d

6 files changed

Lines changed: 23 additions & 23 deletions

File tree

‎web-report/src/components/Dashboard.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,30 +72,30 @@ export const Dashboard: React.FC = () => {
7272
});
7373

7474
return (
75-
<div className="border border-black p-4 max-w-7xl mx-auto bg-white">
75+
<div className="border border-black p-2 sm:p-4 max-w-7xl mx-auto bg-white">
7676
<Header date={data.creationTime}
7777
schemaVersion={data.schemaVersion}
7878
toolNameVersion={`${data.toolName}-${data.toolVersion}`}/>
7979
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
8080
<div className="flex justify-center mb-2 w-full">
81-
<TabsList className={`flex gap-4 w-[80%] max-w-[700px] h-auto p-1 bg-transparent`}>
81+
<TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
8282
<TabsTrigger
8383
value="overview"
84-
className="min-w-[150px] py-3 border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
84+
className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
8585
data-testid="tab-overview"
8686
>
8787
Overview
8888
</TabsTrigger>
8989
<TabsTrigger
9090
value="endpoints"
91-
className="min-w-[150px] py-3 border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
91+
className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
9292
data-testid="tab-endpoints"
9393
>
9494
Endpoints
9595
</TabsTrigger>
9696
<TabsTrigger
9797
value="tests"
98-
className="min-w-[150px] py-3 border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
98+
className="flex-1 sm:flex-none sm:min-w-[150px] py-3 text-xs sm:text-sm border border-gray-500 data-[state=active]:bg-blue-100 data-[state=active]:border-2 data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
9999
data-testid="tab-tests"
100100
>
101101
Tests
@@ -112,7 +112,7 @@ export const Dashboard: React.FC = () => {
112112

113113
<div className="flex justify-center w-full">
114114
{
115-
<TabsList className={`flex gap-4 w-[80%] max-w-[700px] h-auto p-1 bg-transparent`}>
115+
<TabsList className={`flex gap-2 sm:gap-4 w-full max-w-[700px] h-auto p-1 bg-transparent`}>
116116
<ScrollArea className="w-[130%] whitespace-nowrap py-3">
117117
{
118118
testTabs.map((test, index) => (

‎web-report/src/components/EndpointAccordion.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,24 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
6161
const faultColors = ["bg-red-300", "bg-red-500", "bg-red-700"];
6262
return (
6363
<AccordionItem value={value} className="border-2 border-black mb-4 overflow-hidden" data-testid={endpoint}>
64-
<AccordionTrigger className="bg-blue-100 px-4 py-3 text-lg font-bold hover:no-underline hover:bg-blue-200">
65-
<div className="flex-1 font-mono">{endpoint}</div>
66-
<div className="flex flex-wrap justify-end gap-2 mr-4">
64+
<AccordionTrigger className="bg-blue-100 px-3 sm:px-4 py-3 text-sm sm:text-lg font-bold hover:no-underline hover:bg-blue-200">
65+
<div className="flex-1 font-mono break-all text-left">{endpoint}</div>
66+
<div className="flex flex-wrap justify-end gap-1 sm:gap-2 mr-2 sm:mr-4">
6767
{sortedStatusCodes.map((code, idx) => (
68-
<Badge key={`_${idx}`} className={`${getColor(code.code, true, false)} font-mono`}>
68+
<Badge key={`_${idx}`} className={`${getColor(code.code, true, false)} font-mono text-xs`}>
6969
{code.code == -1 ? "NO-RESPONSE" : `H${code.code}`}
7070
</Badge>
7171
))}
7272
{sortedFaults.map((code, idx) => (
73-
<Badge key={`_${idx}`} className={`${getColor(code.code, true, true)} font-mono`}>
73+
<Badge key={`_${idx}`} className={`${getColor(code.code, true, true)} font-mono text-xs`}>
7474
F{code.code}
7575
</Badge>
7676
))}
7777
</div>
7878
</AccordionTrigger>
79-
<AccordionContent className="p-4">
80-
<div className="flex mb-6">
81-
<div className="flex font-bold text-lg mb-2 mr-2">HTTP CODES:</div>
79+
<AccordionContent className="p-3 sm:p-4">
80+
<div className="flex flex-col sm:flex-row mb-6">
81+
<div className="flex font-bold text-base sm:text-lg mb-2 mr-2">HTTP CODES:</div>
8282
<div className="flex flex-wrap gap-2">
8383
{
8484
sortedStatusCodes.map((code, index) => (
@@ -98,8 +98,8 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
9898
</div>
9999
</div>
100100

101-
<div className="flex mb-6">
102-
<div className="flex font-bold text-lg mb-2 mr-2 text-red-500">FAULT CODES:</div>
101+
<div className="flex flex-col sm:flex-row mb-6">
102+
<div className="flex font-bold text-base sm:text-lg mb-2 mr-2 text-red-500">FAULT CODES:</div>
103103
<div className="flex flex-wrap gap-2">
104104
{
105105
sortedFaults.map((fault, index) => (

‎web-report/src/components/Header.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ export const Header: React.FC<IHeaderProps> = ({date, toolNameVersion, schemaVer
3434
</label>
3535
</ReportTooltip>
3636
</div>
37-
<div className="flex justify-between border-b border-black pb-2 mb-4">
37+
<div className="flex flex-col gap-1 sm:flex-row sm:justify-between sm:items-center border-b border-black pb-2 mb-4 text-xs sm:text-base">
3838
<ReportTooltip tooltipText={info.creationDate}>
39-
<div className="font-bold" data-testid="header-creation-date">Creation Date: {new Date(date).toUTCString()}</div>
39+
<div className="font-bold break-words" data-testid="header-creation-date">Creation Date: {new Date(date).toUTCString()}</div>
4040
</ReportTooltip>
4141
<ReportTooltip tooltipText={info.toolNameVersion}>
42-
<div className="font-bold text-center flex items-center justify-center gap-2" data-testid="header-tool-name-version">
42+
<div className="font-bold flex items-center sm:justify-center gap-2" data-testid="header-tool-name-version">
4343
<span>Tool: {toolNameVersion}</span>
4444
<img
4545
src={ICON_URL}
@@ -50,7 +50,7 @@ export const Header: React.FC<IHeaderProps> = ({date, toolNameVersion, schemaVer
5050
</div>
5151
</ReportTooltip>
5252
<ReportTooltip tooltipText={info.schemaVersion}>
53-
<div className="font-bold text-right" data-testid="header-schema-version">Schema Version: {schemaVersion}</div>
53+
<div className="font-bold sm:text-right" data-testid="header-schema-version">Schema Version: {schemaVersion}</div>
5454
</ReportTooltip>
5555
</div>
5656
</>

‎web-report/src/pages/Endpoints.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const Endpoints: React.FC<IProps> = ({addTestTab}) => {
1313
const {transformedReport, filteredEndpoints, filterEndpoints} = useAppContext();
1414

1515
return (
16-
<div className="border-2 border-black p-6 rounded-none">
16+
<div className="border-2 border-black p-3 sm:p-6 rounded-none">
1717
<StatusCodeFilters data={transformedReport} onFiltersChange={filterEndpoints}/>
1818
<div className="flex items-center mb-2">
1919
<h3 className="text-sm font-medium text-gray-700 mr-3"># Endpoints:</h3>

‎web-report/src/pages/TestResults.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const TestResults: React.FC<IProps> = ({testCaseName, embedded = false})
5555
const displayedLanguage = lowCodeMode ? "markdown" : getLanguage(filePath ?? "");
5656

5757
return (
58-
<div className={embedded ? "p-4" : "border-2 border-black p-6 rounded-none"}>
58+
<div className={embedded ? "p-2 sm:p-4" : "border-2 border-black p-3 sm:p-6 rounded-none"}>
5959
<div className="gap-6 mb-6">
6060

6161
{/* Others Section */}

‎web-report/src/pages/Tests.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const Tests: React.FC = () => {
7777
};
7878

7979
return (
80-
<div className="border-2 border-black p-6 rounded-none">
80+
<div className="border-2 border-black p-3 sm:p-6 rounded-none">
8181
<div className="flex flex-wrap items-center gap-2 mb-4">
8282
<Button onClick={saveReviews} className="bg-black text-white hover:bg-gray-800" data-testid="reviews-save">
8383
<Download className="w-4 h-4 mr-1"/> Save reviews

0 commit comments

Comments
 (0)