[WEB-808] style: workspace settings mobile responsiveness (#4047)

* [WEB-808] style: workspace settings mobile responsiveness

* fix: scroll on mobile-view

* responsiveness fixes

---------

Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
This commit is contained in:
Ramesh Kumar Chandra 2024-04-29 12:59:04 +05:30 committed by GitHub
parent 0c880bbbc8
commit 9c8b4afc20
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 140 additions and 128 deletions

View file

@ -124,7 +124,7 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-2xl">
{!generatedWebhook ? (
<WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
) : (

View file

@ -94,15 +94,15 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
<div className="space-y-2">
{webhookId && <div className="text-sm font-medium">Secret key</div>}
<div className="text-xs text-custom-text-400">Generate a token to sign-in to the webhook payload</div>
<div className="flex items-center gap-4">
<div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded border border-custom-border-200 px-2 py-1.5">
<div className="flex flex-col md:flex-row md:items-center gap-4">
<div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded border border-custom-border-200 px-2 h-8">
<div className="select-none overflow-hidden font-medium">
{shouldShowKey ? (
<p className="text-xs">{webhookSecretKey}</p>
) : (
<div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5 overflow-hidden mr-2">
{[...Array(30)].map((_, index) => (
<div key={index} className="h-1 w-1 rounded-full bg-custom-text-400" />
<div key={index} className="h-1 w-1 rounded-full bg-custom-text-400 flex-shrink-0" />
))}
</div>
)}