fix: fix scrollbar and dev env vars (#21)

Author: teallarson

README.md

@@ -47,7 +47,7 @@ Load the widget via a CDN:
 ```html
 <button id="open-airbyte">Open Airbyte</button>
 
-<script src="https://cdn.jsdelivr.net/npm/@airbyte-embedded/airbyte-embedded-widget"></script>
+<script src="https://cdn.jsdelivr.net/npm/@airbyte-embedded/airbyte-embedded-widget@0.4.2"></script>
 <script>
   const widget = new AirbyteEmbeddedWidget({
     token: "<your-token-here>",

demo/index.html

@@ -23,7 +23,7 @@
     <h1>Airbyte Embedded Widget</h1>
     <button id="open-widget" class="open-widget-btn">Open Airbyte Widget</button>
 
-    <script src="https://cdn.jsdelivr.net/npm/@airbyte-embedded/airbyte-embedded-widget"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@airbyte-embedded/airbyte-embedded-widget@0.4.2"></script>
 
     <script>
       document.getElementById('open-widget').addEventListener('click', async () => {

dev/app/api/widget_token/route.ts

@@ -22,8 +22,8 @@ const AIRBYTE_WIDGET_URL = `${BASE_URL}/v1/embedded/widget_token`;
 const AIRBYTE_ACCESS_TOKEN_URL = `${BASE_URL}/v1/applications/token`;
 const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID;
 const CLIENT_SECRET = process.env.NEXT_PUBLIC_CLIENT_SECRET;
-const WORKSPACE_ID = process.env.NEXT_PUBLIC_WORKSPACE_ID;
-
+const EXTERNAL_ID = process.env.NEXT_PUBLIC_EXTERNAL_USER_ID;
+const ORGANIZATION_ID = process.env.NEXT_PUBLIC_ORGANIZATION_ID;
 export async function GET(request: NextRequest) {
   try {
     const referer = request.headers.get("referer");
@@ -43,10 +43,14 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: "Missing CLIENT_SECRET environment variable" }, { status: 500 });
     }
 
-    if (!WORKSPACE_ID) {
+    if (!EXTERNAL_ID) {
       return NextResponse.json({ error: "Missing WORKSPACE_ID environment variable" }, { status: 500 });
     }
 
+    if (!ORGANIZATION_ID) {
+      return NextResponse.json({ error: "Missing ORGANIZATION_ID environment variable" }, { status: 500 });
+    }
+
     // Get access token
     const accessTokenBody = JSON.stringify({
       client_id: CLIENT_ID,
@@ -96,7 +100,8 @@ export async function GET(request: NextRequest) {
         Authorization: `Bearer ${accessToken}`,
       },
       body: JSON.stringify({
-        workspaceId: WORKSPACE_ID,
+        externalUserId: EXTERNAL_ID,
+        organizationId: ORGANIZATION_ID,
         allowedOrigin: origin,
       }),
     });
@@ -119,7 +124,7 @@ export async function GET(request: NextRequest) {
         const tokenUrl = new URL(decodedToken.widgetUrl);
 
         const newToken = {
-          widgetUrl: `https://localhost:3000${tokenUrl.pathname}?${tokenUrl.searchParams.toString()}`,
+          widgetUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}${tokenUrl.pathname}?${tokenUrl.searchParams.toString()}`,
           token: decodedToken.token,
         };
         debugLog("New token:", newToken);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airbyte-embedded/airbyte-embedded-widget",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Embedded widget for Airbyte",
   "type": "module",
   "main": "dist/index.cjs.js",

src/EmbeddedWidget.ts

@@ -39,6 +39,9 @@ const WIDGET_STYLES = `
   border: none;
   background: transparent;
   position: relative;
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
 }
 
 .airbyte-widget-dialog-container {
@@ -47,6 +50,9 @@ const WIDGET_STYLES = `
   background: transparent;
   display: flex;
   flex-direction: column;
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
 }
   
 .airbyte-widget-dialog-content {
@@ -55,6 +61,8 @@ const WIDGET_STYLES = `
   border-radius: 10px;  
   background: none;
   overflow: hidden;
+  max-width: 100vw;
+  max-height: calc(100vh - 60px);
 }
 
 .airbyte-widget-dialog-branding {
@@ -67,6 +75,15 @@ const WIDGET_STYLES = `
   background-position: center;
 }
 
+@media (max-height: 782px) {
+  .airbyte-widget-dialog-branding {
+    display: none;
+  }
+  .airbyte-widget-dialog-content {
+    max-height: 100vh;
+  }
+}
+
 .airbyte-widget-dialog-wrapper::backdrop {
   background-color: hsl(241, 51%, 20%);
   opacity: 0.6;