Repository: supabase/supabase
File: apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx (TypeScript)

Code before:
              ) : (
                <div className="flex flex-col gap-4 px-5">
                  <FormField_Shadcn_
                    key="httpsValues.url"
                    control={form.control}
                    name="httpsValues.url"
                    render={({ field }) => (
                      <FormItemLayout
                        label="URL"
                        description="Supabase Auth will send a HTTPS POST request to this URL each time the hook is triggered."
                      >
                        <FormControl_Shadcn_>
                          <Input_Shadcn_ {...field} />
                        </FormControl_Shadcn_>
                      </FormItemLayout>
                    )}
                  />
                  <FormField_Shadcn_
                    key="httpsValues.secret"
                    control={form.control}
                    name="httpsValues.secret"
                    render={({ field }) => (
                      <FormItemLayout
                        label="Secret"
                        description={
                          <p>
                            Should be a base64 encoded hook secret with a prefix
                            <code className="text-code-inline">v1,whsec_</code>.{' '}
                            <code className="text-code-inline">v1</code> denotes the signature
                            version and <code className="text-code-inline">whsec_</code> signifies a
                            symmetric secret.
                          </p>
                        }
                      >
                        <FormControl_Shadcn_>
                          <div className="flex flex-row">
                            <Input_Shadcn_ {...field} className="rounded-r-none border-r-0" />
                            <Button
                              type="default"
                              size="small"
                              className="rounded-l-none text-xs"
                              onClick={() => {
                                const authHookSecret = generateAuthHookSecret()
                                form.setValue('httpsValues.secret', authHookSecret)
                              }}
                            >
                              Generate secret
                            </Button>
                          </div>
                        </FormControl_Shadcn_>
                      </FormItemLayout>

Review comment (suggestion):
just thinking we break the description into 2 lines for better readability

<img width="744" height="147" alt="image" src="https://github.com/user-attachments/assets/2114789c-1a42-4bfc-98c3-4fc740ad0c10" />

<img width="742" height="163" alt="image" src="https://github.com/user-attachments/assets/9ff2a30d-269f-4081-aa30-3e6f7eec87a4" />



Code after:
                        description="Supabase Auth will send a HTTPS POST request to this URL each time the hook is triggered."
                      >
                        <FormControl_Shadcn_>
                          <Input_Shadcn_ {...field} />
                        </FormControl_Shadcn_>
                      </FormItemLayout>
                    )}
                  />
                  <FormField_Shadcn_
                    key="httpsValues.secret"
                    control={form.control}
                    name="httpsValues.secret"
                    render={({ field }) => (
                      <FormItemLayout
                        label="Secret"
                        description={
                          <div className="flex items-center gap-x-2">
                            <p>
                              Should be a base64 encoded hook secret with a prefix{' '}
                              <code className="text-code-inline">v1,whsec_</code>.
                            </p>
                            <InfoTooltip side="bottom" className="w-60 text-center">
                              <code className="text-code-inline">v1</code> denotes the signature
                              version and <code className="text-code-inline">whsec_</code> signifies
                              a symmetric secret.
                            </InfoTooltip>
                          </div>
                        }
                      >
                        <FormControl_Shadcn_>
                          <div className="flex flex-row">
                            <Input_Shadcn_ {...field} className="rounded-r-none border-r-0" />
                            <Button
                              type="default"
                              size="small"
                              className="rounded-l-none text-xs"
                              onClick={() => {
                                const authHookSecret = generateAuthHookSecret()
                                form.setValue('httpsValues.secret', authHookSecret)
                              }}
                            >
                              Generate secret
                            </Button>
                          </div>
                        </FormControl_Shadcn_>
                      </FormItemLayout>
                    )}
                  />
                </div>
              )}
            </form>