Commit3c63c8c

committed

fix: fix tabs styling

1 parent2354883 commit3c63c8cCopy full SHA for 3c63c8c

File tree

-5

lines changed

site/src
- components/Tabs
  - Tabs.tsx
- pages/TemplatePage
  - TemplateLayout.tsx

-5

lines changed

Lines changed: 5 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { type FC, type HTMLAttributes, createContext, useContext } from "react";`
`2`	`2`	`import{Link,typeLinkProps}from"react-router-dom";`
`3`	`3`	`import{cn}from"utils/cn";`
`4`	`4`
`5`		`-exportconstTAB_PADDING_Y=12;`
	`5`	`+// Keeping this for now because of a workaround in WorkspaceBUildPageView`
`6`	`6`	`exportconstTAB_PADDING_X=16;`
`7`	`7`
`8`	`8`	`typeTabsContextValue={`
`@@ -13,11 +13,13 @@ const TabsContext = createContext<TabsContextValue \| undefined>(undefined);`
`13`	`13`
`14`	`14`	`typeTabsProps=HTMLAttributes<HTMLDivElement>&TabsContextValue;`
`15`	`15`
`16`		`-exportconstTabs:FC<TabsProps>=({ active, ...htmlProps})=>{`
	`16`	`+exportconstTabs:FC<TabsProps>=({className,active, ...htmlProps})=>{`
`17`	`17`	`return(`
`18`	`18`	`<TabsContext.Providervalue={{ active}}>`
`19`	`19`	`<div`
`20`		`-className="border-b border-solid border-border border-t-0 border-l-0 border-r-0"`
	`20`	`+// Because the Tailwind preflight is not used, its necessary to set border style to solid and`
	`21`	`+// reset all border widths to 0 https://tailwindcss.com/docs/border-width#using-without-preflight`
	`22`	`+className={cn("border-0 border-b border-solid border-border",className)}`
`21`	`23`	`{...htmlProps}`
`22`	`24`	`/>`
`23`	`25`	`</TabsContext.Provider>`

Lines changed: 2 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import type { AuthorizationRequest } from "api/typesGenerated";`
`3`	`3`	`import{ErrorAlert}from"components/Alert/ErrorAlert";`
`4`	`4`	`import{Loader}from"components/Loader/Loader";`
`5`	`5`	`import{Margins}from"components/Margins/Margins";`
`6`		`-import{TAB_PADDING_Y,TabLink,Tabs,TabsList}from"components/Tabs/Tabs";`
	`6`	`+import{TabLink,Tabs,TabsList}from"components/Tabs/Tabs";`
`7`	`7`	`import{`
`8`	`8`	`typeFC,`
`9`	`9`	`typePropsWithChildren,`
`@@ -110,7 +110,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({`
`110`	`110`
`111`	`111`	`<Tabs`
`112`	`112`	`active={activeTab}`
`113`		`-css={{marginBottom:40,marginTop:-TAB_PADDING_Y}}`
	`113`	`+className="mb-10 -mt-3"`
`114`	`114`	`>`
`115`	`115`	`<Margins>`
`116`	`116`	`<TabsList>`

Comments

(0)